<template>
  <div class="data-list">
    <!-- 筛选区域 -->
    <div class="filter-section">
      <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
      <el-select v-model="selectedProvince" placeholder="选择省份" @change="handleProvinceChange" clearable>
        <el-option
          v-for="item in provinces"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="selectedCity" placeholder="选择城市" @change="handleCityChange" clearable>
        <el-option
          v-for="item in cities"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select 
        v-model="selectedCompetitor" 
        placeholder="选择友商" 
        @change="handleCompetitorSelect" 
        clearable 
        filterable
        remote
        :remote-method="remoteMethod"
        :loading="loading">
        <el-option
          v-for="item in competitorOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

    <el-select v-model="selectedCity" placeholder="竟品类型" @change="handleProjectPropChange" clearable>
        <el-option
          v-for="item in typelist"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="selectedCity" placeholder="我司市场占比" @change="handleMarketRatioChange" clearable>
        <el-option
          v-for="item in marketRatioList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <Taber 
      :province="getSelectedProvinceName()" 
      :city="getSelectedCityName()"
      :competitor-count="competitorCount"
      :competitor-area="competitorArea"
      :competitor-sold-area="competitorSoldArea"
      :competitor-stock-area="competitorStockArea"
      :competitor-monthly-average="competitorMonthlyAverage">
    </Taber>
    <div class="content-wrapper">
      <!-- 左侧地图 -->
      <div class="map-section">
        <div ref="mapChart" class="map"></div>
        <canvas ref="heatmapCanvas" class="heatmap-overlay"></canvas>
      </div>

      <!-- 中间表格 -->
      <div class="table-section">
        <div class="section-title">友商公司统计</div>
        <el-table :data="filteredTableData" style="width: 100%">
          <el-table-column prop="rank" label="排名" width="60" align="center">
            <template slot-scope="scope">
              <span class="rank-badge" :class="{'top-rank': scope.row.rank <= 3}">
                {{ scope.row.rank }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="友商公司" width="80">
            <template slot-scope="scope">
              <div class="company-name">{{ scope.row.name }}</div>
              
            </template>
          </el-table-column>
          <el-table-column prop="name" label="地区" width="180">
            <template slot-scope="scope">
            
              <div class="company-areas" v-if="scope.row.areas && scope.row.areas.length > 0">
                <el-tag 
                  v-for="area in scope.row.areas.slice(0, 3)" 
                  :key="area" 
                  size="mini" 
                  type="info">
                  {{ area }}
                </el-tag>
                <span v-if="scope.row.areas.length > 3" class="more-areas">
                  +{{ scope.row.areas.length - 3 }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="竟品数量" width="80" align="center">
            <template slot-scope="scope">
              <span class="project-count">{{ scope.row.count }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ratio" label="占比" align="center">
            <template slot-scope="scope">
              <div class="ratio-wrapper">
                <span class="ratio-text">{{ scope.row.ratio.toFixed(1) }}%</span>
                <el-progress 
                  :percentage="scope.row.ratio" 
                  :show-text="false" 
                  :stroke-width="6"
                  :color="getProgressColor(scope.$index)">
                </el-progress>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 右侧友商排名和面积统计 -->
      <div class="right-panel">
        <div class="competitor-section">
          <div class="section-title">友商项目排名</div>
          <div class="competitor-list" v-if="filteredCompetitors.length > 0">
            <div 
              v-for="(item, index) in filteredCompetitors" 
              :key="index" 
              class="competitor-item"
              :class="{ 'selected': selectedCompetitorKey === item.key }"
              @click="handleCompetitorClick(item)">
              <div class="competitor-info">
                <span class="rank" :class="{'top-rank': item.rank <= 3}">{{ item.rank }}</span>
                <div class="competitor-name">{{ item.name }}</div>
                <div class="value-info">
                <span class="value">{{ item.value }}</span>
                  <span class="percentage" v-if="item.percentage">{{ item.percentage.toFixed(1) }}%</span>
              </div>
            </div>
              <el-progress 
                :percentage="item.percentage || getProgressPercentage(item.value)" 
                :color="getProgressColor(item.rank - 1)">
              </el-progress>
            </div>
          </div>
          <div class="empty-state" v-else>
            <div class="empty-text">暂无友商排名数据</div>
            <div class="empty-hint">请选择省份和城市查看数据</div>
          </div>
        </div>
        
        <!-- 面积统计模块 -->
        <div class="area-stats-section">
          <div class="section-title">面积统计</div>
          <div class="area-stats-list">
            <div 
              v-for="(item, index) in currentAreaStats" 
              :key="index" 
              class="area-stats-item">
              <div class="area-stats-info">
                <span class="area-name">{{ item.name }}</span>
                <span class="area-value">{{ formatAreaValue(item.value, item.isPrice) }}</span>
              </div>
              <el-progress 
                :percentage="item.percentage" 
                :color="item.color"
                :show-text="false">
              </el-progress>
            </div>
          </div>
        </div>
      </div>
      <div class="right-panel">
        <div class="city-analysis-section">
          <div class="section-title">城市分析:</div>
          
          <!-- 前10名城市 -->
          <div class="city-rank-group">
            <div class="city-rank-title">我司市场占比前10名的城市</div>
            <div class="city-list">
              <div 
                v-for="(city, index) in top10Cities" 
                :key="index" 
                class="city-item">
                <div class="city-info">
                  <span class="city-rank" :class="{'top-rank': index < 3}">{{ index + 1 }}</span>
                  <span class="city-name">{{ city.name }}</span>
                  <span class="city-ratio">{{ city.ratio }}%</span>
                </div>
                <el-progress 
                  :percentage="city.ratio" 
                  :color="getCityProgressColor(index)"
                  :show-text="false">
                </el-progress>
              </div>
            </div>
          </div>

          <!-- 后10名城市 -->
          <div class="city-rank-group">
            <div class="city-rank-title">我司市场占比后10名的城市</div>
            <div class="city-list">
              <div 
                v-for="(city, index) in bottom10Cities" 
                :key="index" 
                class="city-item">
                <div class="city-info">
                  <span class="city-rank">{{ index + 1 }}</span>
                  <span class="city-name">{{ city.name }}</span>
                  <span class="city-ratio">{{ city.ratio }}%</span>
                </div>
                <el-progress 
                  :percentage="city.ratio" 
                  color="#909399"
                  :show-text="false">
                </el-progress>
              </div>
            </div>
          </div>

          <!-- 统计信息 -->
          <div class="city-summary">
            <div class="summary-item">
              <span>总计有{{ citySummary.total }}个城市,</span>
            </div>
            <div class="summary-item">
              <span>赢的城市有{{ citySummary.winCount }}个,明细为{{ citySummary.winCities }}</span>
            </div>
            <div class="summary-item">
              <span>输的城市有{{ citySummary.loseCount }}个,明细为{{ citySummary.loseCities }}</span>
            </div>
          </div>
        </div>
      </div>
     
      
    </div>
  </div>
</template>

<script>
import Taber from '@/components/taber.vue'
import * as echarts from 'echarts'
import 'echarts/extension/bmap/bmap'
// 移除本地JSON文件导入，改为动态获取
import chinaJSON from '../assets/map-data/china.json'
// import guangdongJSON from '../assets/map-data/440000.json'
// import shanghaiJSON from '../assets/map-data/310000.json'
// import beijingJSON from '../assets/map-data/110000.json'
// import shenzhenJSON from '../assets/map-data/深圳市.json'
// import guangzhouJSON from '../assets/map-data/广州市.json'
import axios from 'axios'
import { emergencyFixMap, createHtmlBackupMap } from '@/utils/mapEmergencyFix'
// 导入竞争对手热力图数据 - 使用动态导入避免JSON解析错误
// import competitorHeatmapData from '@/assets/competitor_heatmap_data.json'

export default {
  name: 'DataList',
  components: {
    Taber
  },
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      selectedCompetitor: '',
      mapChart: null,
      loading: false,
      allCompetitors: [], // 所有友商数据
      competitorOptions: [], // 友商选项
      // 省份数据 - 通过API动态获取
      provinces: [],
      // 城市数据 - 通过API动态获取
      cities: [],
      // 表格数据 - 通过API动态获取
      tableData: [],
      // 友商排名数据 - 通过API动态获取
      competitors: [],
      // 原始表格数据（用于筛选）
      originalTableData: [],
      // 原始友商排名数据（用于筛选）
      originalCompetitors: [],
      // 热力图数据 - 通过API动态获取
      currentHeatmapData: null,
      // 面积统计数据 - 通过API动态获取
      currentAreaStats: [],
      // 选中的友商
      selectedCompetitorKey: null,
      // 友商统计数据
      competitorCount: null,
      competitorArea: null,
      competitorSoldArea: null,
      competitorStockArea: null,
      competitorMonthlyAverage: null,
      // 地图数据缓存
      mapDataCache: new Map(),
      // 竞争对手热力图数据
      competitorHeatmapData: null,
      // 城市分析数据 - 假数据
      top10Cities: [
        { name: '深圳市', ratio: 45.8 },
        { name: '广州市', ratio: 42.3 },
        { name: '杭州市', ratio: 38.6 },
        { name: '上海市', ratio: 35.2 },
        { name: '北京市', ratio: 33.9 },
        { name: '成都市', ratio: 31.5 },
        { name: '武汉市', ratio: 29.8 },
        { name: '南京市', ratio: 28.4 },
        { name: '苏州市', ratio: 26.7 },
        { name: '西安市', ratio: 24.3 }
      ],
      bottom10Cities: [
        { name: '兰州市', ratio: 5.2 },
        { name: '西宁市', ratio: 4.8 },
        { name: '银川市', ratio: 4.5 },
        { name: '乌鲁木齐市', ratio: 4.1 },
        { name: '拉萨市', ratio: 3.9 },
        { name: '呼和浩特市', ratio: 3.6 },
        { name: '海口市', ratio: 3.2 },
        { name: '贵阳市', ratio: 2.9 },
        { name: '昆明市', ratio: 2.5 },
        { name: '南宁市', ratio: 2.1 }
      ],
      citySummary: {
        total: 20,
        winCount: 12,
        winCities: '深圳市、广州市、杭州市、上海市、北京市、成都市、武汉市、南京市、苏州市、西安市、重庆市、天津市',
        loseCount: 8,
        loseCities: '兰州市、西宁市、银川市、乌鲁木齐市、拉萨市、呼和浩特市、海口市、贵阳市'
      },
      // 省份/城市名称到地图代码的映射
      areaCodeMap: {
        // 省份映射
        '北京市': '110000',
        '天津市': '120000',
        '河北省': '130000',
        '山西省': '140000',
        '内蒙古自治区': '150000',
        '辽宁省': '210000',
        '吉林省': '220000',
        '黑龙江省': '230000',
        '上海市': '310000',
        '江苏省': '320000',
        '浙江省': '330000',
        '安徽省': '340000',
        '福建省': '350000',
        '江西省': '360000',
        '山东省': '370000',
        '河南省': '410000',
        '湖北省': '420000',
        '湖南省': '430000',
        '广东省': '440000',
        '广西壮族自治区': '450000',
        '海南省': '460000',
        '重庆市': '500000',
        '四川省': '510000',
        '贵州省': '520000',
        '云南省': '530000',
        '西藏自治区': '540000',
        '陕西省': '610000',
        '甘肃省': '620000',
        '青海省': '630000',
        '宁夏回族自治区': '640000',
        '新疆维吾尔自治区': '650000',
        '台湾省': '710000',
        '香港特别行政区': '810000',
        '澳门特别行政区': '820000',
        
        // 城市映射（主要城市）
        '深圳市': '440300',
        '广州市': '440100',
        '东莞市': '441900',
        '佛山市': '440600',
        '珠海市': '440400',
        '中山市': '442000',
        '惠州市': '441300',
        '江门市': '440700',
        '肇庆市': '441200',
        '汕头市': '440500',
        '韶关市': '440200',
        '湛江市': '440800',
        '茂名市': '440900',
        '梅州市': '441400',
        '汕尾市': '441500',
        '河源市': '441600',
        '阳江市': '441700',
        '清远市': '441800',
        '潮州市': '445100',
        '揭阳市': '445200',
        '云浮市': '445300',
        
        // 江苏省城市
        '苏州市': '320500',
        '无锡市': '320200',
        '常州市': '320400',
        '南京市': '320100',
        '南通市': '320600',
        '连云港市': '320700',
        '淮安市': '320800',
        '盐城市': '320900',
        '扬州市': '321000',
        '镇江市': '321100',
        '泰州市': '321200',
        '宿迁市': '321300',
        
        // 浙江省城市
        '杭州市': '330100',
        '宁波市': '330200',
        '温州市': '330300',
        '嘉兴市': '330400',
        '湖州市': '330500',
        '绍兴市': '330600',
        '金华市': '330700',
        '衢州市': '330800',
        '舟山市': '330900',
        '台州市': '331000',
        '丽水市': '331100',
        
        // 辽宁省城市
        '沈阳市': '210100',
        '大连市': '210200',
        '鞍山市': '210300',
        '抚顺市': '210400',
        '本溪市': '210500',
        '丹东市': '210600',
        '锦州市': '210700',
        '营口市': '210800',
        '阜新市': '210900',
        '辽阳市': '211000',
        '盘锦市': '211100',
        '铁岭市': '211200',
        '朝阳市': '211300',
        '葫芦岛市': '211400',
        
        // 山东省城市
        '济南市': '370100',
        '青岛市': '370200',
        '淄博市': '370300',
        '枣庄市': '370400',
        '东营市': '370500',
        '烟台市': '370600',
        '潍坊市': '370700',
        '济宁市': '370800',
        '泰安市': '370900',
        '威海市': '371000',
        '日照市': '371100',
        '临沂市': '371300',
        '德州市': '371400',
        '聊城市': '371500',
        '滨州市': '371600',
        '菏泽市': '371700',
        
        // 河北省城市
        '石家庄市': '130100',
        '唐山市': '130200',
        '秦皇岛市': '130300',
        '邯郸市': '130400',
        '邢台市': '130500',
        '保定市': '130600',
        '张家口市': '130700',
        '承德市': '130800',
        '沧州市': '130900',
        '廊坊市': '131000',
        '衡水市': '131100',
        
        // 安徽省城市
        '合肥市': '340100',
        '芜湖市': '340200',
        '蚌埠市': '340300',
        '淮南市': '340400',
        '马鞍山市': '340500',
        '淮北市': '340600',
        '铜陵市': '340700',
        '安庆市': '340800',
        '黄山市': '341000',
        '滁州市': '341100',
        '阜阳市': '341200',
        '宿州市': '341300',
        '六安市': '341500',
        '亳州市': '341600',
        '池州市': '341700',
        '宣城市': '341800',
        
        // 河南省城市
        '郑州市': '410100',
        '开封市': '410200',
        '洛阳市': '410300',
        '平顶山市': '410400',
        '安阳市': '410500',
        '鹤壁市': '410600',
        '新乡市': '410700',
        '焦作市': '410800',
        '濮阳市': '410900',
        '许昌市': '411000',
        '漯河市': '411100',
        '三门峡市': '411200',
        '南阳市': '411300',
        '商丘市': '411400',
        '信阳市': '411500',
        '周口市': '411600',
        '驻马店市': '411700',
        
        // 湖北省城市
        '武汉市': '420100',
        '黄石市': '420200',
        '十堰市': '420300',
        '宜昌市': '420500',
        '襄阳市': '420600',
        '鄂州市': '420700',
        '荆门市': '420800',
        '孝感市': '420900',
        '荆州市': '421000',
        '黄冈市': '421100',
        '咸宁市': '421200',
        '随州市': '421300',
        
        // 湖南省城市
        '长沙市': '430100',
        '株洲市': '430200',
        '湘潭市': '430300',
        '衡阳市': '430400',
        '邵阳市': '430500',
        '岳阳市': '430600',
        '常德市': '430700',
        '张家界市': '430800',
        '益阳市': '430900',
        '郴州市': '431000',
        '永州市': '431100',
        '怀化市': '431200',
        '娄底市': '431300',
        
        // 四川省城市
        '成都市': '510100',
        '自贡市': '510300',
        '攀枝花市': '510400',
        '泸州市': '510500',
        '德阳市': '510600',
        '绵阳市': '510700',
        '广元市': '510800',
        '遂宁市': '510900',
        '内江市': '511000',
        '乐山市': '511100',
        '南充市': '511300',
        '眉山市': '511400',
        '宜宾市': '511500',
        '广安市': '511600',
        '达州市': '511700',
        '雅安市': '511800',
        '巴中市': '511900',
        '资阳市': '512000',
        
        // 云南省城市
        '昆明市': '530100',
        '曲靖市': '530300',
        '玉溪市': '530400',
        '保山市': '530500',
        '昭通市': '530600',
        '丽江市': '530700',
        '普洱市': '530800',
        '临沧市': '530900',
        '楚雄彝族自治州': '532300',
        '红河哈尼族彝族自治州': '532500',
        '文山壮族苗族自治州': '532600',
        '西双版纳傣族自治州': '532800',
        '大理白族自治州': '532900',
        '德宏傣族景颇族自治州': '533100',
        '怒江傈僳族自治州': '533300',
        '迪庆藏族自治州': '533400',
        
        // 贵州省城市
        '贵阳市': '520100',
        '六盘水市': '520200',
        '遵义市': '520300',
        '安顺市': '520400',
        '毕节市': '520500',
        '铜仁市': '520600',
        '黔西南布依族苗族自治州': '522300',
        '黔东南苗族侗族自治州': '522600',
        '黔南布依族苗族自治州': '522700',
        
        // 广西壮族自治区城市
        '南宁市': '450100',
        '柳州市': '450200',
        '桂林市': '450300',
        '梧州市': '450400',
        '北海市': '450500',
        '防城港市': '450600',
        '钦州市': '450700',
        '贵港市': '450800',
        '玉林市': '450900',
        '百色市': '451000',
        '贺州市': '451100',
        '河池市': '451200',
        '来宾市': '451300',
        '崇左市': '451400',
        
        // 福建省城市
        '福州市': '350100',
        '厦门市': '350200',
        '莆田市': '350300',
        '三明市': '350400',
        '泉州市': '350500',
        '漳州市': '350600',
        '南平市': '350700',
        '龙岩市': '350800',
        '宁德市': '350900',
        
        // 江西省城市
        '南昌市': '360100',
        '景德镇市': '360200',
        '萍乡市': '360300',
        '九江市': '360400',
        '新余市': '360500',
        '鹰潭市': '360600',
        '赣州市': '360700',
        '吉安市': '360800',
        '宜春市': '360900',
        '抚州市': '361000',
        '上饶市': '361100',
        
        // 山西省城市
        '太原市': '140100',
        '大同市': '140200',
        '阳泉市': '140300',
        '长治市': '140400',
        '晋城市': '140500',
        '朔州市': '140600',
        '晋中市': '140700',
        '运城市': '140800',
        '忻州市': '140900',
        '临汾市': '141000',
        '吕梁市': '141100',
        
        // 吉林省城市
        '长春市': '220100',
        '吉林市': '220200',
        '四平市': '220300',
        '辽源市': '220400',
        '通化市': '220500',
        '白山市': '220600',
        '松原市': '220700',
        '白城市': '220800',
        '延边朝鲜族自治州': '222400',
        
        // 黑龙江省城市
        '哈尔滨市': '230100',
        '齐齐哈尔市': '230200',
        '鸡西市': '230300',
        '鹤岗市': '230400',
        '双鸭山市': '230500',
        '大庆市': '230600',
        '伊春市': '230700',
        '佳木斯市': '230800',
        '七台河市': '230900',
        '牡丹江市': '231000',
        '黑河市': '231100',
        '绥化市': '231200',
        '大兴安岭地区': '232700',
        
        // 内蒙古自治区城市
        '呼和浩特市': '150100',
        '包头市': '150200',
        '乌海市': '150300',
        '赤峰市': '150400',
        '通辽市': '150500',
        '鄂尔多斯市': '150600',
        '呼伦贝尔市': '150700',
        '巴彦淖尔市': '150800',
        '乌兰察布市': '150900',
        '兴安盟': '152200',
        '锡林郭勒盟': '152500',
        '阿拉善盟': '152900',
        
        // 陕西省城市
        '西安市': '610100',
        '铜川市': '610200',
        '宝鸡市': '610300',
        '咸阳市': '610400',
        '渭南市': '610500',
        '延安市': '610600',
        '汉中市': '610700',
        '榆林市': '610800',
        '安康市': '610900',
        '商洛市': '611000',
        
        // 甘肃省城市
        '兰州市': '620100',
        '嘉峪关市': '620200',
        '金昌市': '620300',
        '白银市': '620400',
        '天水市': '620500',
        '武威市': '620600',
        '张掖市': '620700',
        '平凉市': '620800',
        '酒泉市': '620900',
        '庆阳市': '621000',
        '定西市': '621100',
        '陇南市': '621200',
        '临夏回族自治州': '622900',
        '甘南藏族自治州': '623000',
        
        // 青海省城市
        '西宁市': '630100',
        '海东市': '630200',
        '海北藏族自治州': '632200',
        '黄南藏族自治州': '632300',
        '海南藏族自治州': '632500',
        '果洛藏族自治州': '632600',
        '玉树藏族自治州': '632700',
        '海西蒙古族藏族自治州': '632800',
        
        // 宁夏回族自治区城市
        '银川市': '640100',
        '石嘴山市': '640200',
        '吴忠市': '640300',
        '固原市': '640400',
        '中卫市': '640500',
        
        // 新疆维吾尔自治区城市
        '乌鲁木齐市': '650100',
        '克拉玛依市': '650200',
        '吐鲁番市': '650400',
        '哈密市': '650500',
        '昌吉回族自治州': '652300',
        '博尔塔拉蒙古自治州': '652700',
        '巴音郭楞蒙古自治州': '652800',
        '阿克苏地区': '652900',
        '克孜勒苏柯尔克孜自治州': '653000',
        '喀什地区': '653100',
        '和田地区': '653200',
        '伊犁哈萨克自治州': '654000',
        '塔城地区': '654200',
        '阿勒泰地区': '654300',
        
        // 西藏自治区城市
        '拉萨市': '540100',
        '日喀则市': '540200',
        '昌都市': '540300',
        '林芝市': '540400',
        '山南市': '540500',
        '那曲市': '540600',
        '阿里地区': '542500',
        
        // 海南省城市
        '海口市': '460100',
        '三亚市': '460200',
        '三沙市': '460300',
        '儋州市': '460400'
      },
      typelist: [
        { value: '1', label: '直接竞品' },
        { value: '2', label: '间接竞品' },
        { value: '3', label: '上位拦截品' },
        { value: '4', label: '下位替代品' },
        { value: '5', label: '对比品' },
      ],
      marketRatioList:[
        { value: '1', label: '0-10%' },
        { value: '2', label: '10%-30%' },
        { value: '3', label: '30%-50%' },
        { value: '4', label: '50%-70%' },
        { value: '5', label: '70%以上' },
      ],
    }
  },
  computed: {
    // 筛选后的表格数据
    filteredTableData() {
      if (!this.selectedCompetitor) {
        return this.originalTableData
      }
      return this.originalTableData.filter(item => item.name === this.selectedCompetitor)
    },
    // 筛选后的友商排名数据
    filteredCompetitors() {
      if (!this.selectedCompetitor) {
        return this.originalCompetitors
      }
      return this.originalCompetitors.filter(item => item.name === this.selectedCompetitor)
    }
  },
  mounted() {
    this.initECharts()
    this.getCompetitors() // 初始化时获取全部友商数据（用于下拉框）
    this.getProvinces()
    // 获取友商统计数据
    this.getCompetitorCount()
    this.getCompetitorArea()
    this.getCompetitorSoldArea()
    this.getCompetitorStockArea()
    this.getCompetitorMonthlyAverage()
    this.getCompanyStatistics()
    this.getTopCompanies()
    // 注意：不在初始化时调用 getTopCompanies 和 getCompanyStatistics
    // 这两个API需要省份和城市参数，只有在选择地区后才调用
    // 监听窗口大小变化
    // window.addEventListener('resize', this.resizeChart)
    // 初始化面积统计数据（延迟一点执行，等待API数据）
    setTimeout(() => {
      this.updateAreaStats()
    }, 1000)
    
    // 🚀 立即执行地图代码修复，确保问题城市不会出现空白地图
    this.fixProblematicCities()
    
    // 🔥 动态加载热力图数据，加载完成后显示全部数据
    this.loadCompetitorHeatmapData().then(() => {
      // 默认显示全部热力图数据
      this.showAllHeatmapData()
    })
    
    // 🧪 添加简单的测试方法到全局（仅用于调试）
    
    

    

  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('resize', this.resizeChart)
    // 销毁图表实例
    if (this.mapChart) {
      this.mapChart.dispose()
    }
  },
  methods: {
    getProvinces() {
      console.log('正在获取省份数据...')
      axios.get('/api/partner-companies/provinces').then(res => {
        console.log('省份数据API响应:', res.data)
        if (res.data && res.data.success && res.data.provinces) {
          // 将API返回的省份数据转换为选项格式
          this.provinces = res.data.provinces.map((provinceName, index) => {
            // 生成省份的value值，可以使用拼音或者索引
            const provinceValueMap = {
              '广东省': 'guangdong',
              '上海市': 'shanghai', 
              '北京市': 'beijing',
              '江苏省': 'jiangsu',
              '浙江省': 'zhejiang',
              '山东省': 'shandong',
              '河北省': 'hebei',
              '河南省': 'henan',
              '湖北省': 'hubei',
              '湖南省': 'hunan',
              '四川省': 'sichuan',
              '云南省': 'yunnan',
              '安徽省': 'anhui',
              '山西省': 'shanxi',
              '广西壮族自治区': 'guangxi',
              '江西省': 'jiangxi',
              '福建省': 'fujian',
              '贵州省': 'guizhou',
              '辽宁省': 'liaoning',
              '重庆市': 'chongqing',
              '陕西省': 'shaanxi',
              '天津市': 'tianjin'
            }
            
            return {
              value: provinceValueMap[provinceName] || `province_${index}`,
              label: provinceName,
              isDirectMunicipality: provinceName.endsWith('市') && !provinceName.includes('省') // 标识直辖市
            }
          })
          console.log('省份数据处理完成:', this.provinces)
        } else {
          console.warn('省份API返回数据格式不正确:', res.data)
          //this.$meaage.warning('省份数据格式不正确')
        }
      }).catch(error => {
        console.error('获取省份数据失败：', error)
        
        // 检查错误类型
        if (error.response) {
          // 服务器响应了错误状态码
          if (error.response.status === 404) {
            console.warn('省份接口不存在: /api/partner-companies/provinces')
            //this.$meaage.warning('暂无省份数据')
          } else {
            //this.$meaage.error(`获取省份数据失败: ${error.response.status}`)
          }
        } else if (error.request) {
          // 请求已发出但没有收到响应
          console.error('网络请求失败:', error.request)
          //this.$meaage.error('网络请求失败，请检查网络连接')
        } else {
          // 其他错误
          console.error('请求配置错误:', error.message)
          //this.$meaage.error('请求配置错误')
        }
        
        // 使用空数组
        this.provinces = []
        console.log('使用空省份数据')
      })
    },

    // 获取城市数据
    getCities(province, provinceName) {
      console.log('正在获取城市数据，省份:', province, '省份名称:', provinceName)
      
      // 调用城市联动接口 - 使用query参数传递省份
      axios.get('/api/partner-companies/cities', {
        params: {
          province: provinceName  // 使用省份中文名称作为参数
        }
      }).then(res => {
        console.log('城市数据API响应:', res.data)
        if (res.data && res.data.success && res.data.cities) {
          // 直接处理城市数据，不调用不存在的方法
          this.cities = res.data.cities.map((cityName, index) => {
            // 为每个城市生成地图代码
            const areaCode = this.getAreaCode(cityName)
            
            return {
              value: `${province}_city_${index}`,
              label: cityName,
              hasMapCode: !!areaCode,
              areaCode: areaCode
            }
          })
          
          console.log('城市数据处理完成:', this.cities)
        } else {
          console.warn('API返回数据格式不正确:', res.data)
          // 如果API返回数据格式不正确，使用空数组
          this.cities = []
        }
      }).catch(error => {
        console.error('获取城市数据失败：', error)
        
        // 检查错误类型
        if (error.response) {
          // 服务器响应了错误状态码
          if (error.response.status === 404) {
            console.warn(`城市接口不存在: /api/partner-companies/cities?province=${provinceName}`)
            //this.$meaage.warning(`暂无${provinceName}的城市数据`)
          } else {
            //this.$meaage.error(`获取城市数据失败: ${error.response.status}`)
          }
        } else if (error.request) {
          // 请求已发出但没有收到响应
          console.error('网络请求失败:', error.request)
          //this.$meaage.error('网络请求失败，请检查网络连接')
        } else {
          // 其他错误
          console.error('请求配置错误:', error.message)
          //this.$meaage.error('请求配置错误')
        }
        
        // 使用空数组
        this.cities = []
        console.log('使用空城市数据')
      })
    },
    // 获取友商数据（用于下拉框选择）
    getCompetitors(province = '', city = '') {
      console.log('正在获取友商数据（下拉框），省份:', province, '城市:', city)
      
      const params = {}
      if (province) params.province = province
      if (city) params.city = city
      
      axios.get('/api/partner-companies', { params }).then(res => {
        console.log('友商数据API响应:', res.data)
        if (res.data && res.data.success) {
          // 处理友商选项数据（用于下拉框）
          if (res.data.partner_companies && Array.isArray(res.data.partner_companies)) {
          console.log('API返回的友商数据:', res.data.partner_companies)
          
          this.allCompetitors = res.data.partner_companies.map(companyName => ({
            value: companyName,
            label: companyName
          }))
          this.competitorOptions = [...this.allCompetitors]
          
          console.log('友商选项数据处理完成:', this.allCompetitors)
          } else {
            this.allCompetitors = []
            this.competitorOptions = []
          }
        } else {
          console.warn('友商API返回数据格式不正确:', res.data)
          console.log('预期数据格式: { success: true, partner_companies: [...] }')
          // 清空数据
          this.allCompetitors = []
          this.competitorOptions = []
        }
      }).catch(error => {
        console.error('获取友商数据失败：', error)
        console.log('请求URL:', `/api/partner-companies`, '参数:', params)
        
        if (error.response) {
          console.log('错误响应状态:', error.response.status)
          console.log('错误响应数据:', error.response.data)
          
          if (error.response.status === 404) {
            //this.$meaage.warning('友商接口不存在，请检查后端服务')
          } else {
            //this.$meaage.error(`获取友商数据失败: ${error.response.status}`)
          }
        } else if (error.request) {
          console.error('网络请求失败:', error.request)
          //this.$meaage.error('网络请求失败，请检查网络连接')
        } else {
          console.error('请求配置错误:', error.message)
          //this.$meaage.error('请求配置错误')
        }
        
        // 清空数据
        this.allCompetitors = []
        this.competitorOptions = []
      })
    },

    // 获取友商数量
    getCompetitorCount(province = '', city = '', partnerCompany = '') {
      console.log('正在获取友商数量，省份:', province, '城市:', city, '友商:', partnerCompany)
      
      const params = {}
      if (province) params.province = province
      if (city) params.city = city
      if (partnerCompany) params.partner_company = partnerCompany
      
      axios.get('/api/partner-companies/competitor-count', { params }).then(res => {
        console.log('友商数量API响应:', res.data)
        if (res.data && res.data.success && typeof res.data.count === 'number') {
          this.competitorCount = res.data.count
          console.log('友商数量更新:', this.competitorCount)
        } else {
          console.warn('友商数量API返回数据格式不正确:', res.data)
          this.competitorCount = 0
        }
      }).catch(error => {
        console.error('获取友商数量失败：', error)
        this.competitorCount = 0
        if (error.response && error.response.status === 404) {
          console.warn('友商数量接口不存在')
        } else {
          //this.$meaage.error('获取友商数量失败')
        }
      })
    },

    // 获取友商开盘面积
    getCompetitorArea(province = '', city = '', partnerCompany = '') {
      console.log('正在获取友商开盘面积，省份:', province, '城市:', city, '友商:', partnerCompany)
      
      const params = {}
      if (province) params.province = province
      if (city) params.city = city
      if (partnerCompany) params.partner_company = partnerCompany
      
      axios.get('/api/partner-companies/competitor-area', { params }).then(res => {
        console.log('友商开盘面积API响应:', res.data)
        // 根据API文档，可能返回的字段名是 area 或其他名称
        if (res.data && res.data.success) {
          // 尝试多种可能的字段名
          const areaValue = res.data.area || res.data.competitor_area || res.data.total_area || 0
          if (typeof areaValue === 'number') {
            this.competitorArea = areaValue
            console.log('友商开盘面积更新:', this.competitorArea)
          } else {
            console.warn('友商开盘面积API返回数据格式不正确，area值:', areaValue)
            this.competitorArea = 0
          }
        } else {
          console.warn('友商开盘面积API返回数据格式不正确:', res.data)
          this.competitorArea = 0
        }
        // 更新面积统计数据
        this.updateAreaStats()
      }).catch(error => {
        console.error('获取友商开盘面积失败：', error)
        this.competitorArea = 0
        if (error.response && error.response.status === 404) {
          console.warn('友商开盘面积接口不存在')
        } else {
          //this.$meaage.error('获取友商开盘面积失败')
        }
        // 更新面积统计数据
        this.updateAreaStats()
      })
    },

    // 获取友商去化面积
    getCompetitorSoldArea(province = '', city = '', partnerCompany = '') {
      console.log('正在获取友商去化面积，省份:', province, '城市:', city, '友商:', partnerCompany)
      
      const params = {}
      if (province) params.province = province
      if (city) params.city = city
      if (partnerCompany) params.partner_company = partnerCompany
      
      axios.get('/api/partner-companies/competitor-sold-area', { params }).then(res => {
        console.log('友商去化面积API响应:', res.data)
        // 根据API文档，可能返回的字段名是 sold_area 或其他名称
        if (res.data && res.data.success) {
          // 尝试多种可能的字段名
          const soldAreaValue = res.data.sold_area || res.data.competitor_sold_area || res.data.total_sold_area || 0
          if (typeof soldAreaValue === 'number') {
            this.competitorSoldArea = soldAreaValue
            console.log('友商去化面积更新:', this.competitorSoldArea)
          } else {
            console.warn('友商去化面积API返回数据格式不正确，sold_area值:', soldAreaValue)
            this.competitorSoldArea = 0
          }
        } else {
          console.warn('友商去化面积API返回数据格式不正确:', res.data)
          this.competitorSoldArea = 0
        }
        // 更新面积统计数据
        this.updateAreaStats()
      }).catch(error => {
        console.error('获取友商去化面积失败：', error)
        this.competitorSoldArea = 0
        if (error.response && error.response.status === 404) {
          console.warn('友商去化面积接口不存在')
        } else {
          //this.$meaage.error('获取友商去化面积失败')
        }
        // 更新面积统计数据
        this.updateAreaStats()
      })
    },

    // 获取竞品库存面积
    getCompetitorStockArea(province = '', city = '', partnerCompany = '') {
      console.log('正在获取竞品库存面积，省份:', province, '城市:', city, '友商:', partnerCompany)
      
      const params = {}
      if (province) params.province = province
      if (city) params.city = city
      if (partnerCompany) params.partner_company = partnerCompany
      
      axios.get('/api/inventory-area/kc-sum', { params }).then(res => {
        console.log('竞品库存面积API响应:', res.data)
        // 根据API文档，可能返回的字段名是 stock_area 或其他名称
        if (res.data && res.data.success) {
          // 尝试多种可能的字段名
          const stockAreaValue = res.data.total_kc_sum || res.data.competitor_stock_area || res.data.total_stock_area || 0
          if (typeof stockAreaValue === 'number') {
            this.competitorStockArea = stockAreaValue
            console.log('竞品库存面积更新:', this.competitorStockArea)
          } else {
            console.warn('竞品库存面积API返回数据格式不正确，stock_area值:', stockAreaValue)
            this.competitorStockArea = 0
          }
        } else {
          console.warn('竞品库存面积API返回数据格式不正确:', res.data)
          this.competitorStockArea = 0
        }
        // 更新面积统计数据
        this.updateAreaStats()
      }).catch(error => {
        console.error('获取竞品库存面积失败：', error)
        this.competitorStockArea = 0
        if (error.response && error.response.status === 404) {
          console.warn('竞品库存面积接口不存在')
        } else {
          //this.$meaage.error('获取竞品库存面积失败')
        }
        // 更新面积统计数据
        this.updateAreaStats()
      })
    },

    // 获取竞品月均去化
    getCompetitorMonthlyAverage(province = '', city = '', partnerCompany = '') {
      console.log('正在获取竞品月均去化，省份:', province, '城市:', city, '友商:', partnerCompany)
      
      const params = {}
      if (province) params.province = province
      if (city) params.city = city
      if (partnerCompany) params.partner_company = partnerCompany
      
      axios.get('/api/inventory-area/monthly-average-sold-area', { params }).then(res => {
        console.log('竞品月均去化API响应:', res.data)
        // 根据API文档，可能返回的字段名是 monthly_average 或其他名称
        if (res.data && res.data.success) {
          // 尝试多种可能的字段名
          const monthlyAverageValue = res.data.monthly_average_sold_area || res.data.competitor_monthly_average || res.data.total_monthly_average || 0
          if (typeof monthlyAverageValue === 'number') {
            this.competitorMonthlyAverage = monthlyAverageValue
            console.log('竞品月均去化更新:', this.competitorMonthlyAverage)
          } else {
            console.warn('竞品月均去化API返回数据格式不正确，monthly_average值:', monthlyAverageValue)
            this.competitorMonthlyAverage = 0
          }
        } else {
          console.warn('竞品月均去化API返回数据格式不正确:', res.data)
          this.competitorMonthlyAverage = 0
        }
        // 更新面积统计数据
        this.updateAreaStats()
      }).catch(error => {
        console.error('获取竞品月均去化失败：', error)
        this.competitorMonthlyAverage = 0
        if (error.response && error.response.status === 404) {
          console.warn('竞品月均去化接口不存在')
        } else {
          //this.$meaage.error('获取竞品月均去化失败')
        }
        // 更新面积统计数据
        this.updateAreaStats()
      })
    },

    // 获取友商公司统计数据（用于右边友商排名显示）
    getCompanyStatistics(province, city, sortOrder = 'desc', limit = 10) {
      console.log('正在获取友商公司统计数据（右边排名），省份:', province, '城市:', city, '排序:', sortOrder, '限制:', limit)
      const params = {
        province: province,
        city: city,
        sort_order: sortOrder,
        limit: limit
      }
      
      axios.get('/api/partner-charts/company-statistics', { params }).then(res => {
        console.log('友商公司统计数据API响应:', res.data)
        if (res.data && res.data.success) {
          // 处理统计数据用于右边友商排名
          if (res.data.statistics && Array.isArray(res.data.statistics)) {
            this.originalCompetitors = res.data.statistics.map((item, index) => ({
              name: item.company_name || '未知公司',
              value: item.count || 0,
              percentage: item.percentage || 0,
              rank: item.rank || (index + 1),
              areas: item.areas || [],
              key: `${province}_${city}_${index}`
            }))
            console.log('右边友商排名数据更新完成:', this.originalCompetitors)
          } else {
            console.warn('statistics字段不存在或格式不正确')
            this.originalCompetitors = []
          }
          
          // 处理汇总信息（可选，用于调试或显示）
          if (res.data.summary) {
            console.log('右边友商排名汇总信息:', {
              总友商数: res.data.summary.total_companies,
              总记录数: res.data.summary.total_records,
              有效记录数: res.data.summary.valid_records,
              无效记录数: res.data.summary.invalid_records,
              返回条数: res.data.summary.returned_count
            })
          }
        } else {
          console.warn('友商公司统计数据API返回格式不正确:', res.data)
          this.originalCompetitors = []
        }
      }).catch(error => {
        console.error('获取友商公司统计数据失败：', error)
        this.originalCompetitors = []
        if (error.response && error.response.status === 404) {
          console.warn('友商公司统计数据接口不存在')
        } else {
          //this.$meaage.error('获取友商公司统计数据失败')
        }
      })
    },

    // 获取排名前N的友商公司（用于左边表格显示）
    getTopCompanies(province, city, top = 15) {
      console.log('正在获取排名前N的友商公司（左边表格），省份:', province, '城市:', city, '前N名:', top)
      
      // 检查必填参数
    
      
      const params = {
        province: province,
        city: city,
        top: top
      }
      
      axios.get('/api/partner-charts/top-companies', { params }).then(res => {
        console.log('排名前N的友商公司API响应:', res.data)
        if (res.data && res.data.success) {
          // 处理top-companies数据用于左边表格
          if (res.data.top_companies && Array.isArray(res.data.top_companies)) {
            this.originalTableData = res.data.top_companies.map((company, index) => ({
              name: company.company_name || company.name || '未知公司',
              count: company.count || company.project_count || 0,
              ratio: company.percentage || 0,
              rank: company.rank || (index + 1),
              areas: company.areas || []
            }))
            console.log('左边表格数据更新完成:', this.originalTableData)
          } else {
            console.warn('companies字段不存在或格式不正确')
            this.originalTableData = []
          }
          
          // 处理汇总信息（可选，用于调试或显示）
          if (res.data.summary) {
            console.log('左边表格汇总信息:', {
              总友商数: res.data.summary.total_companies,
              返回条数: res.data.summary.returned_count
            })
          }
        } else {
          console.warn('排名前N的友商公司API返回格式不正确:', res.data)
          this.originalTableData = []
        }
      }).catch(error => {
        console.error('获取排名前N的友商公司失败：', error)
        this.originalTableData = []
        if (error.response && error.response.status === 404) {
          console.warn('排名前N的友商公司接口不存在')
        } else {
          //this.$meaage.error('获取排名前N的友商公司失败')
        }
      })
    },

    // 远程搜索方法
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.competitorOptions = this.allCompetitors.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.competitorOptions = [...this.allCompetitors]
      }
    },

    // 处理友商选择
    handleCompetitorSelect(value) {
      if (!value) {
        // 如果清空选择，则重置为当前地区的总体数据
        this.updateCompetitorDataByRegion()
        return
      }
   
      
      // 获取当前选中的省份和城市
      const selectedProvince = this.provinces.find(p => p.value === this.selectedProvince)
      const selectedCity = this.cities.find(c => c.value === this.selectedCity)
      
      const provinceName = selectedProvince ? selectedProvince.label : ''
      const cityName = selectedCity ? selectedCity.label : ''
      
      // 调用四个API获取选中友商的数据
      this.getCompetitorArea(provinceName, cityName, value)
      this.getCompetitorSoldArea(provinceName, cityName, value)
      this.getCompetitorStockArea(provinceName, cityName, value)
      this.getCompetitorMonthlyAverage(provinceName, cityName, value)
      this.getCompetitorCount(provinceName, cityName, value)
      
      // 调用图表API获取数据（只有在有省份和城市时才调用）
      if (provinceName && cityName) {
        this.getCompanyStatistics(provinceName, cityName) // 右边友商排名
        this.getTopCompanies(provinceName, cityName) // 左边表格数据
      }
      
      // 🔥 根据选择的友商显示热力图
      this.showCompetitorHeatmap(value)
      //this.$meaage.info(`已选择友商: ${value}，正在加载热力图...`)
    },

    // 根据当前地区更新友商数据
    updateCompetitorDataByRegion() {
      const selectedProvince = this.provinces.find(p => p.value === this.selectedProvince)
      const selectedCity = this.cities.find(c => c.value === this.selectedCity)
      
      const provinceName = selectedProvince ? selectedProvince.label : ''
      const cityName = selectedCity ? selectedCity.label : ''
      
      // 获取友商数据（用于下拉框）
      this.getCompetitors(provinceName, cityName)
      
      // 获取图表数据（只有在有省份和城市时才调用）- 不传递友商参数，显示所有友商
      if (provinceName && cityName) {
        this.getCompanyStatistics(provinceName, cityName) // 右边友商排名
        this.getTopCompanies(provinceName, cityName) // 左边表格数据
      }
      
      // 调用四个API获取当前地区的总体数据（不指定友商）
      this.getCompetitorCount(provinceName, cityName)
      this.getCompetitorArea(provinceName, cityName)
      this.getCompetitorSoldArea(provinceName, cityName)
      this.getCompetitorStockArea(provinceName, cityName)
      this.getCompetitorMonthlyAverage(provinceName, cityName)

      
      // 🔥 显示当前地区的全部热力图数据（没有选择具体友商时）
      if (provinceName || cityName) {
        this.filterHeatmapByLocation(provinceName, cityName)
      } else {
        this.showAllHeatmapData()
      }
    },

    // 动态获取地图数据
    async getMapData(areaCode, provinceCode = null) {
      // 构建缓存键，包含省份信息
      const cacheKey = provinceCode ? `${provinceCode}/${areaCode}` : areaCode
      
      // 检查缓存
      if (this.mapDataCache.has(cacheKey)) {
        return this.mapDataCache.get(cacheKey)
      }
      
      try {
        let url
        
        // 根据是否有省份代码构建不同的URL
        if (provinceCode && provinceCode !== areaCode) {
          // 城市地图：需要省份代码/城市代码的格式
          url = `https://geojson.cn/api/china/1.6.2/${provinceCode}/${areaCode}.json`
          console.log(`正在获取城市地图数据: ${provinceCode}/${areaCode}`)
        } else {
          // 省份地图或全国地图：使用单独的代码
          url = `https://file.geojson.cn/china/1.6.2/${areaCode}.json`
          console.log(`正在获取省份地图数据: ${areaCode}`)
        }
        
        console.log(`📍 请求URL: ${url}`)
        const response = await fetch(url)
      
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }
        
        const mapData = await response.json()
        
        // 缓存数据
        this.mapDataCache.set(cacheKey, mapData)
        
        console.log(`地图数据获取成功，区域代码: ${areaCode}`)
        return mapData
      } catch (error) {
        console.error(`获取地图数据失败，区域代码: ${areaCode}`, error)
        return null
      }
    },

    // 带重试机制的地图数据获取
    async getMapDataWithRetry(areaCode, cityName, maxRetries = 3, provinceCode = null) {
      console.log(`开始获取地图数据（带重试）: ${cityName} -> ${areaCode}${provinceCode ? ` (省份: ${provinceCode})` : ''}`)
      
      for (let attempt = 1; attempt <= maxRetries; attempt++) {
        try {
          console.log(`第${attempt}次尝试获取地图数据: ${areaCode}${provinceCode ? ` (省份: ${provinceCode})` : ''}`)
          
          const mapData = await this.getMapData(areaCode, provinceCode)
          
          if (mapData && mapData.features && mapData.features.length > 0) {
            console.log(`地图数据获取成功（第${attempt}次尝试）: ${areaCode}`)
            return mapData
          } else {
            console.warn(`地图数据无效（第${attempt}次尝试）: ${areaCode}`)
          }
        } catch (error) {
          console.error(`地图数据获取失败（第${attempt}次尝试）: ${areaCode}`, error)
        }
        
        // 如果不是最后一次尝试，等待一段时间再重试
        if (attempt < maxRetries) {
          console.log(`等待${attempt * 1000}ms后重试...`)
          await new Promise(resolve => setTimeout(resolve, attempt * 1000))
        }
      }
      
      console.error(`所有重试都失败了: ${areaCode}`)
      return null
    },

    // 带fallback的地图代码获取
    async getAreaCodeWithFallback(areaName, provinceName = '') {
      console.log(`🔍 开始获取地图代码（带回退）: ${areaName}, 省份: ${provinceName}`)
      
      // 1. 首先尝试直接获取
      let areaCode = this.getAreaCode(areaName)
      if (areaCode) {
        console.log(`✅ 直接获取成功: ${areaName} -> ${areaCode}`)
        return areaCode
      }
      
      // 1.5. 如果有省份信息，尝试结合省份查找
      if (provinceName) {
        // 尝试使用省份代码前缀匹配
        const provinceCode = this.getProvinceCodePrefix(provinceName)
        if (provinceCode) {
          // 在地图代码映射中查找以该省份代码开头的城市
          for (const [key, value] of Object.entries(this.areaCodeMap)) {
            if (value.startsWith(provinceCode) && (key.includes(areaName) || areaName.includes(key.replace(/[市区县]/g, '')))) {
              console.log(`✅ 省份前缀匹配成功: ${areaName} (${provinceName}) -> ${key} -> ${value}`)
              // 动态添加到映射表
              this.areaCodeMap[areaName] = value
              return value
            }
          }
        }
      }
      
      // 2. 尝试去除"市"、"区"、"县"等后缀
      const cleanName = areaName.replace(/[市区县]/g, '')
      areaCode = this.getAreaCode(cleanName)
      if (areaCode) {
        console.log(`✅ 清理后缀获取成功: ${areaName} -> ${cleanName} -> ${areaCode}`)
        // 动态添加到映射表
        this.areaCodeMap[areaName] = areaCode
        return areaCode
      }
      
      // 3. 尝试智能匹配
      for (const [key, value] of Object.entries(this.areaCodeMap)) {
        if (key.includes(cleanName) || cleanName.includes(key.replace(/[市区县]/g, ''))) {
          console.log(`✅ 智能匹配成功: ${areaName} -> ${key} -> ${value}`)
          // 动态添加到映射表
          this.areaCodeMap[areaName] = value
          return value
        }
      }
      
      // 4. 尝试根据省份推断城市代码
      const provinceCode = this.getProvinceCodeFromCityName(areaName)
      if (provinceCode) {
        console.log(`✅ 根据省份推断成功: ${areaName} -> ${provinceCode}`)
        this.areaCodeMap[areaName] = provinceCode
        return provinceCode
      }
      
      console.warn(`❌ 所有方法都无法获取地图代码: ${areaName}`)
      return null
    },

    // 获取省份代码前缀


    // 根据城市名称推断省份代码
  

    // 获取地区代码
    getAreaCode(areaName) {
      if (!areaName) return null
      
      // 直接从映射表中查找
      const code = this.areaCodeMap[areaName]
      if (code) {
        return code
      }
      
      // 如果没有找到，尝试模糊匹配
      for (const [key, value] of Object.entries(this.areaCodeMap)) {
        if (key.includes(areaName) || areaName.includes(key)) {
          return value
        }
      }
      
      console.warn(`未找到地区代码: ${areaName}`)
      return null
    },

    // 获取地图中心点坐标
    getMapCenter(areaName) {
      const centerMap = {
        '中国': [104.114129, 37.550339],
        '北京市': [116.405285, 39.904989],
        '天津市': [117.190182, 39.125596],
        '河北省': [114.502461, 38.045474],
        '山西省': [112.549248, 37.857014],
        '内蒙古自治区': [111.670801, 40.818311],
        '辽宁省': [123.429096, 41.796767],
        '吉林省': [125.3245, 43.886841],
        '黑龙江省': [126.642464, 45.756967],
        '上海市': [121.472644, 31.231706],
        '江苏省': [118.767413, 32.041544],
        '浙江省': [120.153576, 30.287459],
        '安徽省': [117.283042, 31.86119],
        '福建省': [119.306239, 26.075302],
        '江西省': [115.892151, 28.676493],
        '山东省': [117.000923, 36.675807],
        '河南省': [113.665412, 34.757975],
        '湖北省': [114.298572, 30.584355],
        '湖南省': [112.982279, 28.19409],
        '广东省': [113.280637, 23.125178],
        '广西壮族自治区': [108.320004, 22.82402],
        '海南省': [110.33119, 20.031971],
        '重庆市': [106.504962, 29.533155],
        '四川省': [104.065735, 30.659462],
        '贵州省': [106.713478, 26.578343],
        '云南省': [102.712251, 25.040609],
        '西藏自治区': [91.132212, 29.660361],
        '陕西省': [108.948024, 34.263161],
        '甘肃省': [103.823557, 36.058039],
        '青海省': [101.778916, 36.623178],
        '宁夏回族自治区': [106.278179, 38.46637],
        '新疆维吾尔自治区': [87.617733, 43.792818],
        
        // 主要城市中心点
        '深圳市': [114.085947, 22.547],
        '广州市': [113.280637, 23.125178],
        '杭州市': [120.153576, 30.287459],
        '南京市': [118.767413, 32.041544],
        '青岛市': [120.355173, 36.082982],
        '大连市': [121.618622, 38.914003],
        '宁波市': [121.549792, 29.868388],
        '厦门市': [118.11022, 24.490474],
        '昆明市': [102.712251, 25.040609],
        '沈阳市': [123.429096, 41.796767],
        '西安市': [108.948024, 34.263161],
        '长沙市': [112.982279, 28.19409],
        '哈尔滨市': [126.642464, 45.756967],
        '长春市': [125.3245, 43.886841],
        '武汉市': [114.298572, 30.584355],
        '郑州市': [113.665412, 34.757975],
        '成都市': [104.065735, 30.659462],
        '济南市': [117.000923, 36.675807],
        '太原市': [112.549248, 37.857014],
        '合肥市': [117.283042, 31.86119],
        '南昌市': [115.892151, 28.676493],
        '南宁市': [108.320004, 22.82402],
        '贵阳市': [106.713478, 26.578343],
        '福州市': [119.306239, 26.075302],
        '石家庄市': [114.502461, 38.045474],
        '兰州市': [103.823557, 36.058039],
        '呼和浩特市': [111.670801, 40.818311],
        '西宁市': [101.778916, 36.623178],
        '银川市': [106.278179, 38.46637],
        '乌鲁木齐市': [87.617733, 43.792818],
        '拉萨市': [91.132212, 29.660361],
        '海口市': [110.33119, 20.031971]
      }
      
      return centerMap[areaName] || centerMap['中国']
    },

    // 生成可能的地图代码
 







    // 动态添加地图代码映射（当后端返回新的城市时）
   






    // 获取地图缩放级别
    getMapZoom(areaName) {
      const zoomMap = {
        '中国': 1,
        '广东省': 1.2,
        '上海市': 1.5,
        '北京市': 1.5,
        '深圳市': 1.8,
        '广州市': 1.5,
        '江苏省': 1.2,
        '浙江省': 1.2,
        '山东省': 1.2,
        '安徽省': 1.2,
        '河北省': 1.2,
        '河南省': 1.2,
        '湖北省': 1.2,
        '湖南省': 1.2,
        '四川省': 1.0,
        '云南省': 1.0,
        '山西省': 1.2,
        '辽宁省': 1.2,
        '吉林省': 1.2,
        '黑龙江省': 1.0,
        '陕西省': 1.2,
        '甘肃省': 1.0,
        '青海省': 0.8,
        '福建省': 1.3,
        '江西省': 1.2,
        '贵州省': 1.2,
        '内蒙古自治区': 0.8,
        '广西壮族自治区': 1.2,
        '西藏自治区': 0.6,
        '宁夏回族自治区': 1.5,
        '新疆维吾尔自治区': 0.5,
        '天津市': 1.8,
        '重庆市': 1.3,
        '海南省': 1.5,
      }
      
      return zoomMap[areaName] || 1
    },

    // 初始化 ECharts
    async initECharts() {
      // 初始化图表实例
      this.mapChart = echarts.init(this.$refs.mapChart)
      
      try {
        // 动态获取中国地图数据
        const chinaMapData = await this.getMapData('100000')
        if (chinaMapData) {
        // 注册中国地图数据
          echarts.registerMap('china', chinaMapData)
        }
        
        // 设置默认配置
        const option = {
          backgroundColor: '#404a59',
          title: {
            text: '项目分布热力图',
            left: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              if (params.componentType === 'series') {
                return params.name + ': ' + params.value[2]
              }
              return params.name
            }
          },
          visualMap: [
            {
              type: 'continuous',
              min: 0,
              max: 200,
              calculable: true,
              realtime: false,
              inRange: {
                color: ['rgba(0,0,255,0.3)', 'rgba(0,255,255,0.5)', 'rgba(0,255,0,0.7)', 'rgba(255,255,0,0.8)', 'rgba(255,0,0,1)']
              },
              textStyle: {
                color: '#fff'
              },
              left: 'left',
              top: 'bottom'
            }
          ],
          geo: {
            map: 'china',
            label: {
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#323c48',
                borderColor: '#111'
              },
              emphasis: {
                areaColor: '#2a333d'
              }
            },
            roam: true,
            zoom: 1,
            center: [104.114129, 37.550339],
            scaleLimit: {
              min: 1,
              max: 5
            }
          },
          series: []
        }
        
        this.mapChart.setOption(option)
        
        // 初始化热力图Canvas
        this.initHeatmapCanvas()
        
        // 监听地图变化事件，重新绘制热力图
        this.mapChart.on('georoam', () => {
          if (this.currentHeatmapData) {
            this.drawHeatmap(this.currentHeatmapData)
          }
        })
      } catch (error) {
        console.error('初始化地图失败：', error)
        //this.$meaage.error('地图加载失败，请刷新重试')
      }
    },

    // 初始化热力图Canvas
    initHeatmapCanvas() {
      const canvas = this.$refs.heatmapCanvas
      const mapContainer = this.$refs.mapChart
      
      if (!canvas || !mapContainer) {
        console.warn('Canvas或地图容器不存在')
        return
      }
      
      // 设置Canvas尺寸与地图容器一致
      const width = mapContainer.offsetWidth
      const height = mapContainer.offsetHeight
      
      canvas.width = width
      canvas.height = height
      canvas.style.width = width + 'px'
      canvas.style.height = height + 'px'
      
      console.log(`🎨 热力图Canvas初始化完成: ${width}x${height}`)
    },

    // 绘制真正的热力图
    drawHeatmap(data) {
      const canvas = this.$refs.heatmapCanvas
      if (!canvas) {
        console.error('❌ Canvas元素不存在')
        return
      }
      
      const ctx = canvas.getContext('2d')
      
      // 清空画布
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      
      if (!data || data.length === 0) {
        console.warn('⚠️ 没有热力图数据要绘制')
        return
      }
      

      
      let drawnCount = 0
      let failedCount = 0
      
      data.forEach((point, index) => {
        // 验证数据点
        if (!point.lng || !point.lat || isNaN(point.lng) || isNaN(point.lat)) {
          console.warn(`数据点无效: [${point.lng}, ${point.lat}]`)
          failedCount++
          return
        }
        
        // 将经纬度转换为屏幕坐标
        const screenCoords = this.convertGeoToScreen(point.lng, point.lat)
        if (!screenCoords || screenCoords.length !== 2) {
          console.warn(`坐标转换失败: [${point.lng}, ${point.lat}]`)
          failedCount++
          
          // 🔥 如果坐标转换失败，使用备用的简单映射
          const fallbackCoords = this.fallbackCoordMapping(point.lng, point.lat, canvas.width, canvas.height)
          if (fallbackCoords) {
            this.drawHeatPoint(ctx, fallbackCoords[0], fallbackCoords[1], point, canvas)
            drawnCount++
          }
          return
        }
        
        const x = screenCoords[0]
        const y = screenCoords[1]
        
        // 检查坐标是否在画布范围内
        if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
          console.warn(`坐标超出画布范围: [${x}, ${y}]`)
          failedCount++
          return
        }
        
        // 绘制热力点
        this.drawHeatPoint(ctx, x, y, point, canvas)
        drawnCount++
      })
      
      console.log(`✅ 热力图绘制完成，成功绘制 ${drawnCount} 个点，失败 ${failedCount} 个点`)
      
      // 如果所有点都绘制失败，显示警告
      if (drawnCount === 0 && data.length > 0) {
        console.error('❌ 所有热力图点都绘制失败')
        //this.$meaage.error('热力图绘制失败，请检查地图状态')
        
        // 显示调试信息
        console.error('❌ 所有热力图点都绘制失败，请检查地图状态和坐标转换')
      } else if (drawnCount > 0) {
        //this.$meaage.success(`热力图显示成功，共显示 ${drawnCount} 个项目位置`)
      }
    },

    // 🎨 绘制单个热力点
    drawHeatPoint(ctx, x, y, point, canvas) {
      try {
        // 🔥 优化热力图显示效果
        const intensity = Math.min((point.count || 1) / 10, 1) // 降低强度计算基数
        const baseRadius = 20 // 增大基础半径，更容易看到
        const radius = baseRadius + Math.sqrt(point.count || 1) * 3 // 动态半径
        
        // 🎨 创建更鲜明的径向渐变
        const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius)
        gradient.addColorStop(0, `rgba(255, 69, 0, ${Math.max(intensity * 0.9, 0.7)})`)     // 深橙红色中心
        gradient.addColorStop(0.3, `rgba(255, 140, 0, ${Math.max(intensity * 0.7, 0.5)})`)  // 橙色
        gradient.addColorStop(0.6, `rgba(255, 215, 0, ${Math.max(intensity * 0.5, 0.3)})`)  // 金色
        gradient.addColorStop(0.8, `rgba(255, 255, 0, ${Math.max(intensity * 0.3, 0.2)})`)  // 黄色
        gradient.addColorStop(1, 'rgba(255, 255, 0, 0)')                                     // 透明黄色边缘
        
        // 🎯 绘制热力点
        ctx.save()
        ctx.globalCompositeOperation = 'screen'
        ctx.fillStyle = gradient
        ctx.beginPath()
        ctx.arc(x, y, radius, 0, 2 * Math.PI)
        ctx.fill()
        
        // 🔴 在中心添加一个小的实心圆点，便于精确定位
        ctx.globalCompositeOperation = 'source-over'
        ctx.fillStyle = 'rgba(255, 0, 0, 0.9)'
        ctx.beginPath()
        ctx.arc(x, y, 4, 0, 2 * Math.PI)
        ctx.fill()
        
        ctx.restore()
        
        // 📍 可选：显示项目名称（仅在项目较少时）
        if (point.project_name && canvas.width > 500) {
          ctx.save()
          ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'
          ctx.strokeStyle = 'rgba(0, 0, 0, 0.8)'
          ctx.lineWidth = 2
          ctx.font = 'bold 12px Arial'
          ctx.textAlign = 'center'
          
          const text = point.project_name.replace('（销售）', '').substring(0, 8)
          ctx.strokeText(text, x, y - radius - 8)
          ctx.fillText(text, x, y - radius - 8)
          ctx.restore()
        }
        
      } catch (error) {
        console.error('绘制热力点失败:', error)
      }
    },

    // 🔄 备用坐标映射（当ECharts坐标转换失败时使用）
    fallbackCoordMapping(lng, lat, canvasWidth, canvasHeight) {
      try {
        // 中国大陆的经纬度范围
        const minLng = 73.66
        const maxLng = 135.05
        const minLat = 3.86
        const maxLat = 53.55
        
        // 检查坐标是否在合理范围内
        if (lng < minLng || lng > maxLng || lat < minLat || lat > maxLat) {
          console.warn(`坐标超出中国范围: [${lng}, ${lat}]`)
          return null
        }
        
        // 简单的线性映射
        const x = ((lng - minLng) / (maxLng - minLng)) * canvasWidth
        const y = canvasHeight - ((lat - minLat) / (maxLat - minLat)) * canvasHeight
        
        console.log(`备用坐标映射: [${lng}, ${lat}] -> [${x}, ${y}]`)
        return [x, y]
        
      } catch (error) {
        console.error('备用坐标映射失败:', error)
        return null
      }
    },

    // 将地理坐标转换为屏幕坐标
    convertGeoToScreen(lng, lat) {
      if (!this.mapChart) return null
      
      try {
        // 🔥 等待地图完全初始化后再进行坐标转换
        const pointInPixel = this.mapChart.convertToPixel('geo', [lng, lat])
        
        // 验证转换结果的有效性
        if (pointInPixel && Array.isArray(pointInPixel) && 
            pointInPixel.length === 2 && 
            !isNaN(pointInPixel[0]) && !isNaN(pointInPixel[1])) {
          return pointInPixel
        } else {
          console.warn('坐标转换结果无效:', pointInPixel)
          return null
        }
      } catch (error) {
        console.error('坐标转换失败：', error)
        return null
      }
    },
    
    // 更新热力图数据
    updateHeatmap(data) {
      if (!this.mapChart) {
        //this.$meaage.error('地图未初始化')
        return
      }

      try {
        // 保存当前数据
        this.currentHeatmapData = data
        // 使用Canvas绘制真正的热力图
        this.drawHeatmap(data)
      } catch (error) {
        console.error('更新热力图失败：', error)
        //this.$meaage.error('更新热力图失败，请重试')
      }
    },

    // 处理窗口大小变化
    resizeChart() {
      if (this.mapChart) {
        this.mapChart.resize()
      }
      
      // 🔥 延迟重绘热力图，确保地图完全调整完成
      setTimeout(() => {
        this.redrawHeatmapAfterMapChange()
      }, 200)
    },

    // 处理省份变化
    handleProvinceChange(value) {
      this.selectedCity = ''
      this.selectedCompetitor = ''
      
      if (value) {
        // 查找选中省份的完整信息
        const selectedProvince = this.provinces.find(p => p.value === value)
        if (selectedProvince) {
          // 调用城市联动接口
          this.getCities(value, selectedProvince.label)
        }
        
        // 清空表格数据和友商排名数据（需要省份+城市才能获取）
        this.originalTableData = []
        this.originalCompetitors = []
        
        // 获取该省份的友商数据（用于下拉框）
        this.getCompetitors(selectedProvince.label)
        
        // 注意：两个图表API需要省份和城市都必填
        // 所以在只选择省份时不调用这两个API
        
        // 获取该省份的友商统计数据
        this.getCompetitorCount(selectedProvince.label)
        this.getCompetitorArea(selectedProvince.label)
        this.getCompetitorSoldArea(selectedProvince.label)
        this.getCompetitorStockArea(selectedProvince.label)
        this.getCompetitorMonthlyAverage(selectedProvince.label)
        
        // 强制成功的省级地图加载
        this.loadProvinceMapWithGuarantee(value)
        
        // 🔥 根据选中省份筛选热力图数据
        this.filterHeatmapByLocation(selectedProvince.label)
      } else {
        // 清空城市数据
        this.cities = []
        this.originalTableData = []
        this.originalCompetitors = []
        
        // 获取全部友商数据（用于下拉框）
        this.getCompetitors()
        
        // 获取全部友商统计数据
        this.getCompetitorCount()
        this.getCompetitorArea()
        this.getCompetitorSoldArea()
        this.getCompetitorStockArea()
        this.getCompetitorMonthlyAverage()
        
        // 重置为全国地图
        this.resetToChina()
        
        // 🔥 显示全部热力图数据（没有选择省份时）
        this.showAllHeatmapData()
      }
    },

    // 加载省级地图
    async loadProvinceMap(provinceValue) {
      try {
        // 根据省份value获取省份名称
        const selectedProvince = this.provinces.find(p => p.value === provinceValue)
        if (!selectedProvince) {
          console.error('找不到省份信息:', provinceValue)
          //this.$meaage.error(`找不到省份信息: ${provinceValue}`)
          return
        }
        
        const provinceName = selectedProvince.label
        const areaCode = this.getAreaCode(provinceName)
        
        console.log(`省份映射检查: ${provinceName} -> ${areaCode}`)
        
        if (!areaCode) {
          console.error('找不到省份对应的地图代码:', provinceName)
          //this.$meaage.warning(`暂不支持 ${provinceName} 的地图显示，请联系开发人员添加地图代码`)
            return
        }
        
        console.log(`正在加载省级地图: ${provinceName} (${areaCode})`)
        
        // 显示加载提示
        //this.$meaage.info(`正在加载${provinceName}地图数据...`)
        
        // 动态获取省份地图数据
        const provinceMapData = await this.getMapData(areaCode)
        if (!provinceMapData) {
          console.error('获取地图数据失败:', areaCode)
          //this.$meaage.error(`获取${provinceName}地图数据失败，请检查网络连接`)
          return
        }
        
        // 验证地图数据结构
        if (!provinceMapData.features || !Array.isArray(provinceMapData.features)) {
          console.error('地图数据格式不正确:', provinceMapData)
          //this.$meaage.error(`${provinceName}地图数据格式不正确`)
          return
        }
        
        console.log(`地图数据验证通过，features数量: ${provinceMapData.features.length}`)
        
        // 注册省份地图数据
        echarts.registerMap(provinceValue, provinceMapData)
        
        // 获取地图中心点和缩放级别
        const center = this.getMapCenter(provinceName)
        const zoom = this.getMapZoom(provinceName)
        
        console.log(`地图配置: 中心点[${center[0]}, ${center[1]}], 缩放级别: ${zoom}`)

        const option = {
          backgroundColor: '#404a59',
          title: {
            text: provinceName,
            left: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return params.name || '未知区域'
            }
          },
          visualMap: [
            {
              type: 'continuous',
              min: 0,
              max: 200,
              calculable: true,
              realtime: false,
              inRange: {
                color: ['rgba(0,0,255,0.3)', 'rgba(0,255,255,0.5)', 'rgba(0,255,0,0.7)', 'rgba(255,255,0,0.8)', 'rgba(255,0,0,1)']
              },
              textStyle: {
                color: '#fff'
              },
              left: 'left',
              top: 'bottom'
            }
          ],
          geo: {
            map: provinceValue,
            label: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 12
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 14
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#323c48',
                borderColor: '#111',
                borderWidth: 1
              },
              emphasis: {
                areaColor: '#2a333d',
                borderColor: '#fff',
                borderWidth: 2
              }
            },
            roam: true,
            zoom: zoom,
            center: center,
            scaleLimit: {
              min: 0.5,
              max: 5
            }
          },
          series: [{
            type: 'map',
            geoIndex: 0,
            data: []
          }]
        }

        this.mapChart.setOption(option, true)
        console.log(`省级地图加载完成: ${provinceName}`)
        
        // 🔥 地图加载完成后，等待一下再重新绘制热力图
        setTimeout(() => {
          this.redrawHeatmapAfterMapChange()
        }, 300)
        //this.$meaage.success(`${provinceName}地图加载成功`)

      } catch (error) {
        console.error('加载省级地图失败：', error)
        //this.$meaage.error(`加载省级地图失败: ${error.message}`)
      }
    },

    // 处理友商点击
    handleCompetitorClick(competitor) {
      // 设置选中的友商
      this.selectedCompetitorKey = competitor.key
      
      // 同时更新友商选择框的值
      this.selectedCompetitor = competitor.name
      
      // 获取当前选中的省份和城市
      const selectedProvince = this.provinces.find(p => p.value === this.selectedProvince)
      const selectedCity = this.cities.find(c => c.value === this.selectedCity)
      
      const provinceName = selectedProvince ? selectedProvince.label : ''
      const cityName = selectedCity ? selectedCity.label : ''
      
      // 调用四个API获取选中友商的数据
      this.getCompetitorCount(provinceName, cityName, competitor.name)
      this.getCompetitorArea(provinceName, cityName, competitor.name)
      this.getCompetitorSoldArea(provinceName, cityName, competitor.name)
      this.getCompetitorStockArea(provinceName, cityName, competitor.name)
      this.getCompetitorMonthlyAverage(provinceName, cityName, competitor.name)
      
      // 调用图表API获取数据（只有在有省份和城市时才调用）
      if (provinceName && cityName) {
        this.getCompanyStatistics(provinceName, cityName) // 右边友商排名
        this.getTopCompanies(provinceName, cityName) // 左边表格数据
      }
      
      // 🔥 根据选择的友商显示热力图
      this.showCompetitorHeatmap(competitor.name)
      //this.$meaage.info(`已选择友商: ${competitor.name}，正在加载热力图...`)
    },

    // 处理城市变化
    handleCityChange(value) {
      this.selectedCompetitor = ''
      
      if (value) {
        // 需要找到对应的城市中文名称
        const selectedCity = this.cities.find(c => c.value === value)
        const selectedProvince = this.provinces.find(p => p.value === this.selectedProvince)
        
        if (selectedCity && selectedProvince) {
          // 获取该城市的友商数据（用于下拉框）
          this.getCompetitors(selectedProvince.label, selectedCity.label)
          
          // 获取该城市的图表数据
          this.getCompanyStatistics(selectedProvince.label, selectedCity.label) // 右边友商排名
          this.getTopCompanies(selectedProvince.label, selectedCity.label) // 左边表格数据
          
          // 获取该城市的友商统计数据
          const selectedCompetitorName = this.selectedCompetitor
          this.getCompetitorCount(selectedProvince.label, selectedCity.label)
          this.getCompetitorArea(selectedProvince.label, selectedCity.label, selectedCompetitorName)
          this.getCompetitorSoldArea(selectedProvince.label, selectedCity.label, selectedCompetitorName)
          this.getCompetitorStockArea(selectedProvince.label, selectedCity.label, selectedCompetitorName)
          this.getCompetitorMonthlyAverage(selectedProvince.label, selectedCity.label, selectedCompetitorName)
          
          // 强制成功的地图加载
          this.loadCityMapWithGuarantee(value)
          
          // 🔥 根据选中省份和城市筛选热力图数据
          this.filterHeatmapByLocation(selectedProvince.label, selectedCity.label)
        }
      } else {
        // 如果没有选择城市，清空图表数据，只按省份筛选
        this.originalTableData = []
        this.originalCompetitors = []
        
        const selectedProvince = this.provinces.find(p => p.value === this.selectedProvince)
        if (selectedProvince) {
          // 获取该省份的友商数据（用于下拉框）
          this.getCompetitors(selectedProvince.label)
          
          // 注意：两个图表API需要省份和城市都必填
          // 所以在没有选择城市时不调用这两个API
          
          // 获取该省份的友商统计数据
          this.getCompetitorCount(selectedProvince.label)
          this.getCompetitorArea(selectedProvince.label)
          this.getCompetitorSoldArea(selectedProvince.label)
          this.getCompetitorStockArea(selectedProvince.label)
          this.getCompetitorMonthlyAverage(selectedProvince.label)
          
          // 重新加载省份地图
          this.loadProvinceMap(this.selectedProvince)
          
          // 🔥 根据选中省份筛选热力图数据（没有选择城市时）
          this.filterHeatmapByLocation(selectedProvince.label)
        }
      }
    },



    // 设置加载状态地图，防止空白
    setLoadingMap(cityName) {
      console.log(`🔄 设置加载状态地图: ${cityName}`)
      
      const option = {
        backgroundColor: '#404a59',
        title: {
          text: `正在加载${cityName}地图...`,
          left: 'center',
          top: 'middle',
          textStyle: {
            color: '#fff',
            fontSize: 18
          }
        },
        graphic: {
          type: 'text',
          left: 'center',
          top: '60%',
          style: {
            text: '请稍候...',
            fill: '#999',
            fontSize: 14
          }
        },
        geo: {
          map: 'china',
          silent: true,
          itemStyle: {
            normal: {
              areaColor: '#323c48',
              borderColor: '#111',
              opacity: 0.3
            }
          },
          emphasis: {
            itemStyle: {
              areaColor: '#2a333d'
            }
          },
          roam: false,
          zoom: 1,
          center: [104.114129, 37.550339]
        }
      }
      
      try {
        this.mapChart.setOption(option, true)
      } catch (error) {
        console.error('设置加载状态也失败了:', error)
      }
    },

    // 强制成功的省份地图加载（永远不会失败）
    async loadProvinceMapWithGuarantee(provinceValue) {
      console.log(`开始强制成功的省份地图加载: ${provinceValue}`)
      
      try {
        // 首先尝试正常的省份地图加载
        await this.loadProvinceMap(provinceValue)
        console.log('省份地图加载成功')
      } catch (error) {
        console.error('省份地图加载失败，启动强制成功机制:', error)
        
        // 如果省份地图加载失败，显示全国地图
        try {
          console.log('回退到全国地图')
          await this.resetToChina()
          //this.$meaage.info('显示全国地图')
        } catch (fallbackError) {
          console.error('全国地图也失败了，强制显示基础地图:', fallbackError)
          // 最后的保险：直接设置一个简单的地图配置
          this.forceDisplayBasicMap()
        }
      }
    },

        // 终极保险：绝对不会失败的基础地图显示
 

            // 超级强化版城市地图加载（带超时和强制回退）
    async loadCityMap(cityValue) {
      const timeoutDuration = 5000 // 5秒超时
      
      return new Promise(async (resolve, reject) => {
        // 设置超时定时器
        const timeoutId = setTimeout(() => {
          console.warn('⏰ 城市地图加载超时，强制回退')
          reject(new Error('城市地图加载超时'))
        }, timeoutDuration)
        
        try {
          // 根据城市value获取城市名称
          const selectedCity = this.cities.find(c => c.value === cityValue)
          if (!selectedCity) {
            clearTimeout(timeoutId)
            throw new Error('找不到城市信息')
          }
          
          const cityName = selectedCity.label
          console.log(`⚡ 开始加载城市地图: ${cityName}`)
          
          // 获取当前选中的省份信息
          const selectedProvince = this.provinces.find(p => p.value === this.selectedProvince)
          const provinceName = selectedProvince ? selectedProvince.label : ''
          
          console.log(`📍 省份上下文: ${provinceName}`)
          
          // 尝试多种方式获取地图代码，结合省份信息
          const areaCode = await this.getAreaCodeWithFallback(cityName, provinceName)
          
          if (!areaCode) {
            clearTimeout(timeoutId)
            throw new Error(`无法获取城市地图代码: ${cityName}`)
          }
          
          console.log(`🎯 城市地图代码获取成功: ${cityName} -> ${areaCode}`)
          
          // 获取省份代码，用于城市地图请求
          const provinceCode = provinceName ? this.getAreaCode(provinceName) : null
          console.log(`🏙️ 准备获取城市地图，省份代码: ${provinceCode}，城市代码: ${areaCode}`)
          
          // 尝试获取城市地图数据（带超时），传递省份代码
          let cityMapData = await Promise.race([
            this.getMapDataWithRetry(areaCode, cityName, 2, provinceCode), // 传递省份代码
            new Promise((_, reject) => setTimeout(() => reject(new Error('数据获取超时')), 3000))
          ])
          
          // 如果城市地图数据无效，尝试使用省份地图作为回退
          if (!cityMapData || !cityMapData.features || cityMapData.features.length === 0) {
            console.warn(`城市地图数据无效，尝试使用省份地图: ${cityName}`)
            
            if (provinceName && provinceCode) {
              console.log(`🔄 回退到省份地图: ${provinceName} -> ${provinceCode}`)
              cityMapData = await this.getMapDataWithRetry(provinceCode, provinceName, 1)
              
              if (cityMapData && cityMapData.features && cityMapData.features.length > 0) {
                console.log(`✅ 省份地图回退成功: ${provinceName}`)
                // 更新标题以反映实际显示的是省份地图
                cityName = `${provinceName}（${cityName}暂不可用）`
              } else {
                clearTimeout(timeoutId)
                throw new Error(`省份地图也无效: ${provinceName}`)
              }
            } else {
              clearTimeout(timeoutId)
              throw new Error(`城市地图数据无效且无省份信息: ${cityName}`)
            }
          }
          
          console.log(`✅ 城市地图数据验证通过，features数量: ${cityMapData.features.length}`)
          
          // 注册城市地图数据
          echarts.registerMap(cityValue, cityMapData)
          
          // 获取地图中心点和缩放级别
          const center = this.getMapCenter(cityName)
          const zoom = this.getMapZoom(cityName)
          
          const option = {
            backgroundColor: '#404a59',
            title: {
              text: `${cityName}各区分布`,
              left: 'center',
              textStyle: {
                color: '#fff'
              }
            },
            tooltip: {
              trigger: 'item',
              formatter: function (params) {
                return params.name || '未知区域'
              }
            },
            visualMap: [
              {
                type: 'continuous',
                min: 0,
                max: 200,
                calculable: true,
                realtime: false,
                inRange: {
                  color: ['rgba(0,0,255,0.3)', 'rgba(0,255,255,0.5)', 'rgba(0,255,0,0.7)', 'rgba(255,255,0,0.8)', 'rgba(255,0,0,1)']
                },
                textStyle: {
                  color: '#fff'
                },
                left: 'left',
                top: 'bottom'
              }
            ],
            geo: {
              map: cityValue,
              label: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 12
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    color: '#fff',
                    fontSize: 14
                  }
                }
              },
              itemStyle: {
                normal: {
                  areaColor: '#323c48',
                  borderColor: '#111',
                  borderWidth: 1
                },
                emphasis: {
                  areaColor: '#2a333d',
                  borderColor: '#fff',
                  borderWidth: 2
                }
              },
              roam: true,
              zoom: zoom,
              center: center,
              scaleLimit: {
                min: 0.5,
                max: 8
              }
            },
            series: [{
              type: 'map',
              geoIndex: 0,
              data: []
            }]
          }

          this.mapChart.setOption(option, true)
          console.log(`🎉 城市地图加载完成: ${cityName}`)
          
          // 🔥 地图加载完成后，等待一下再重新绘制热力图
          setTimeout(() => {
            this.redrawHeatmapAfterMapChange()
          }, 300)
          
          clearTimeout(timeoutId)
          resolve()

        } catch (error) {
          clearTimeout(timeoutId)
          console.error('❌ 城市地图加载失败：', error)
          reject(error)
        }
      })
    },

    getProgressPercentage(value) {
      const maxValue = 200
      return (value / maxValue) * 100
    },

    getProgressColor(index) {
      const colors = ['#f56c6c', '#e6a23c', '#67c23a', '#409eff', '#909399']
      return colors[index] || colors[colors.length - 1]
    },

    getCityProgressColor(index) {
      const colors = ['#f56c6c', '#e6a23c', '#67c23a', '#409eff', '#909399']
      return colors[index % colors.length]
    },

    // 获取热力图颜色
    getHeatColor(ratio) {
      const colors = [
        { point: 0, color: '#0000ff' },    // 蓝色
        { point: 0.5, color: '#00ff00' },  // 绿色
        { point: 1, color: '#ff0000' }     // 红色
      ]
      
      // 找到ratio所在的区间
      let startColor, endColor
      let startPoint, endPoint
      
      for (let i = 0; i < colors.length - 1; i++) {
        if (ratio >= colors[i].point && ratio <= colors[i + 1].point) {
          startColor = colors[i].color
          endColor = colors[i + 1].color
          startPoint = colors[i].point
          endPoint = colors[i + 1].point
          break
        }
      }
      
      // 计算颜色渐变
      const r1 = parseInt(startColor.substr(1, 2), 16)
      const g1 = parseInt(startColor.substr(3, 2), 16)
      const b1 = parseInt(startColor.substr(5, 2), 16)
      
      const r2 = parseInt(endColor.substr(1, 2), 16)
      const g2 = parseInt(endColor.substr(3, 2), 16)
      const b2 = parseInt(endColor.substr(5, 2), 16)
      
      const p = (ratio - startPoint) / (endPoint - startPoint)
      
      const r = Math.round(r1 + (r2 - r1) * p)
      const g = Math.round(g1 + (g2 - g1) * p)
      const b = Math.round(b1 + (b2 - b1) * p)
      
      return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
    },

    // 添加重置视图方法
    resetMapView() {
      if (this.mapChart) {
        this.mapChart.dispatchAction({
          type: 'restore'
        })
      }
    },

    // 重置为全国地图
    async resetToChina() {
      try {
        // 动态获取中国地图数据（全国地图不需要省份代码）
        const chinaMapData = await this.getMapData('100000')
        if (chinaMapData) {
          // 注册中国地图数据
          echarts.registerMap('china', chinaMapData)
        }
        
        // 设置全国地图配置
        const option = {
          backgroundColor: '#404a59',
          title: {
            text: '项目分布热力图',
            left: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              if (params.componentType === 'series') {
                return params.name + ': ' + params.value[2]
              }
              return params.name
            }
          },
          visualMap: [
            {
              type: 'continuous',
              min: 0,
              max: 200,
              calculable: true,
              realtime: false,
              inRange: {
                color: ['rgba(0,0,255,0.3)', 'rgba(0,255,255,0.5)', 'rgba(0,255,0,0.7)', 'rgba(255,255,0,0.8)', 'rgba(255,0,0,1)']
              },
              textStyle: {
                color: '#fff'
              },
              left: 'left',
              top: 'bottom'
            }
          ],
          geo: {
            map: 'china',
            label: {
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#323c48',
                borderColor: '#111'
              },
              emphasis: {
                areaColor: '#2a333d'
              }
            },
            roam: true,
            zoom: 1,
            center: [104.114129, 37.550339],
            scaleLimit: {
              min: 1,
              max: 5
            }
          },
          series: []
        }
        
        this.mapChart.setOption(option, true)
        console.log('重置为全国地图完成')
        
        // 🔥 地图重置完成后，等待一下再重新绘制热力图
        setTimeout(() => {
          this.redrawHeatmapAfterMapChange()
        }, 300)
      } catch (error) {
        console.error('重置为全国地图失败：', error)
        //this.$meaage.error('重置地图失败')
      }
    },

    // 清空热力图
    clearHeatmap() {
      // 清空热力图数据
      this.currentHeatmapData = null
      
      // 清空Canvas绘制
      const canvas = this.$refs.heatmapCanvas
      if (canvas) {
        const ctx = canvas.getContext('2d')
        ctx.clearRect(0, 0, canvas.width, canvas.height)
      }
    },

    // 🔥 根据选择的友商显示热力图
    showCompetitorHeatmap(competitorName) {
      console.log(`🔥 开始显示友商热力图: ${competitorName}`)
      
      if (!competitorName) {
        console.warn('友商名称为空，清空热力图')
        this.clearHeatmap()
        return
      }
      
      // 获取当前选中的省份和城市
      const selectedProvince = this.provinces.find(p => p.value === this.selectedProvince)
      const selectedCity = this.cities.find(c => c.value === this.selectedCity)
      
      const provinceName = selectedProvince ? selectedProvince.label : ''
      const cityName = selectedCity ? selectedCity.label : ''
      
      try {
        // 从导入的数据中筛选匹配的友商数据
        let filteredData = this.filterCompetitorHeatmapData(competitorName)
        
        if (filteredData.length === 0) {
          console.warn(`未找到友商 "${competitorName}" 的热力图数据`)
          //this.$meaage.warning(`未找到 "${competitorName}" 的项目位置数据`)
          this.clearHeatmap()
          return
        }
        
        console.log(`找到 ${filteredData.length} 个 "${competitorName}" 的项目位置`)
        
        // 🎯 如果选择了地区，进一步根据地区筛选
        if (provinceName || cityName) {
          filteredData = filteredData.filter(point => {
            return this.isPointInLocation(point.lng, point.lat, provinceName, cityName)
          })
          
          const locationText = cityName ? `${provinceName}-${cityName}` : provinceName
          console.log(`地区筛选后（${locationText}）: ${filteredData.length} 个项目`)
        }
        
        if (filteredData.length === 0) {
          const locationText = cityName ? `${provinceName}-${cityName}` : provinceName || '当前地区'
          console.warn(`友商 "${competitorName}" 在 ${locationText} 没有项目数据`)
          //this.$meaage.info(`友商 "${competitorName}" 在 ${locationText} 暂无项目数据`)
          this.clearHeatmap()
          return
        }
        
        // 更新热力图显示
        this.updateHeatmap(filteredData)
        
        // 显示成功信息
        const locationText = cityName ? `${provinceName}-${cityName}` : provinceName || '全国'
        //this.$meaage.success(`已显示 "${competitorName}" 在 ${locationText} 的 ${filteredData.length} 个项目`)
        
      } catch (error) {
        console.error('显示友商热力图失败:', error)
        //this.$meaage.error('显示友商热力图失败，请重试')
        this.clearHeatmap()
      }
    },

    // 🔍 筛选友商热力图数据
    filterCompetitorHeatmapData(competitorName) {
      console.log(`🔍 开始筛选友商数据: ${competitorName}`)
      
      if (!this.competitorHeatmapData || !this.competitorHeatmapData.points) {
        console.error('热力图数据不存在或格式不正确')
        return []
      }
      
      // 筛选匹配的友商数据
      const filteredPoints = this.competitorHeatmapData.points.filter(point => {
        // 检查数据完整性
        if (!point.developer || point.developer === 'nan' || 
            !point.lng || !point.lat || 
            isNaN(point.lng) || isNaN(point.lat)) {
          return false
        }
        
        // 精准匹配
        return point.developer === competitorName
      })
      
      console.log(`筛选结果: 找到 ${filteredPoints.length} 个匹配的项目`)
      
     
      
      return filteredPoints
    },

    // 🗺️ 显示所有友商热力图（用于测试）
   



    // 格式化面积数值显示
    formatAreaValue(value, isPrice = false) {
      if (!value) return '0'
      
      if (isPrice) {
        // 价格格式化
        if (value >= 10000) {
          return (value / 10000).toFixed(1) + '万元/㎡'
        } else {
          return value.toLocaleString() + '元/㎡'
        }
      } else {
        // 面积格式化
        if (value >= 10000) {
          return (value / 10000).toFixed(1) + '万㎡'
        } else {
          return value.toLocaleString() + '㎡'
        }
      }
    },

    // 获取选中省份的中文名称
    getSelectedProvinceName() {
      if (!this.selectedProvince) return ''
      const province = this.provinces.find(p => p.value === this.selectedProvince)
      return province ? province.label : ''
    },

    // 获取选中城市的中文名称
    getSelectedCityName() {
      if (!this.selectedCity) return ''
      const city = this.cities.find(c => c.value === this.selectedCity)
      return city ? city.label : ''
    },

    // 更新面积统计数据
    updateAreaStats() {
      // 计算总面积，用于计算百分比
      const totalArea = this.competitorArea + this.competitorSoldArea + this.competitorStockArea
      
      // 构建面积统计数据
      this.currentAreaStats = []
      
      // 开盘面积 - 即使为0也显示
      this.currentAreaStats.push({
        name: '开盘面积',
        value: this.competitorArea || 0,
        percentage: totalArea > 0 ? Math.round((this.competitorArea / totalArea) * 100) : 0,
        color: '#409eff',
        isPrice: false
      })
      
      // 去化面积 - 即使为0也显示
      this.currentAreaStats.push({
        name: '去化面积',
        value: this.competitorSoldArea || 0,
        percentage: totalArea > 0 ? Math.round((this.competitorSoldArea / totalArea) * 100) : 0,
        color: '#67c23a',
        isPrice: false
      })
      
      // 库存面积 - 即使为0也显示
      this.currentAreaStats.push({
        name: '库存面积',
        value: this.competitorStockArea || 0,
        percentage: totalArea > 0 ? Math.round((this.competitorStockArea / totalArea) * 100) : 0,
        color: '#e6a23c',
        isPrice: false
      })
      
      // 月均去化（这个不是面积，但也显示在统计中）- 即使为0也显示
      this.currentAreaStats.push({
        name: '月均去化',
        value: this.competitorMonthlyAverage || 0,
        percentage: this.competitorMonthlyAverage > 0 ? 100 : 0, // 月均去化有值时显示为100%
        color: '#f56c6c',
        isPrice: false
      })
      
      console.log('面积统计数据更新:', this.currentAreaStats)
    },

    // 测试地图数据获取 - 可以在浏览器控制台调用
  

    // 检查当前API返回的城市地图支持情况
    async checkCurrentCitiesMapSupport() {
      console.log('检查当前城市列表的地图支持情况...')
      
      if (!this.cities || this.cities.length === 0) {
        console.warn('当前没有城市数据')
        return
      }
      
      const results = []
      
      for (const city of this.cities) {
        const areaCode = city.areaCode || this.getAreaCode(city.label)
        
        if (areaCode) {
          try {
            const mapData = await this.getMapData(areaCode)
            results.push({
              cityName: city.label,
              areaCode,
              supported: !!mapData,
              featuresCount: mapData?.features?.length || 0
            })
          } catch (error) {
            results.push({
              cityName: city.label,
              areaCode,
              supported: false,
              error: error.message
            })
          }
        } else {
          results.push({
            cityName: city.label,
            areaCode: null,
            supported: false,
            error: '无地图代码'
          })
        }
      }
      
      // 统计结果
      const supportedCount = results.filter(r => r.supported).length
      const unsupportedCount = results.filter(r => !r.supported).length
      
      console.log('当前城市地图支持情况:', results)
      console.log(`支持地图显示: ${supportedCount}个城市`)
      console.log(`不支持地图显示: ${unsupportedCount}个城市`)
      
      if (unsupportedCount > 0) {
        const unsupportedCities = results.filter(r => !r.supported).map(r => r.cityName)
        console.warn('不支持地图显示的城市:', unsupportedCities)
      }
      
      return results
    },

    // 获取地图代码统计信息
    getMapCodeStats() {
      const totalCodes = Object.keys(this.areaCodeMap).length
      const provinceCodes = Object.keys(this.areaCodeMap).filter(name => name.includes('省') || name.includes('市') && !name.includes('区')).length
      const cityCodes = totalCodes - provinceCodes
      
      console.log('地图代码统计:', {
        总数: totalCodes,
        省级: provinceCodes,
        城市级: cityCodes,
        缓存数量: this.mapDataCache.size
      })
      
      return {
        total: totalCodes,
        provinces: provinceCodes,
        cities: cityCodes,
        cached: this.mapDataCache.size
      }
    },

    // 一键测试当前所有城市的地图支持（快速版本）
   

    // 强制为所有API返回的城市生成地图支持
   

    // 🛠️ 修复问题城市的地图代码
    async fixProblematicCities() {
     
    },

    // 🌟 显示全部热力图数据
    showAllHeatmapData() {
      console.log('🌟 显示全部热力图数据')
      
      if (!this.competitorHeatmapData || !this.competitorHeatmapData.points) {
        console.warn('⚠️ 没有热力图数据可显示')
        return
      }
      
      // 筛选有效的数据点
      const validPoints = this.competitorHeatmapData.points.filter(point => {
        return point.lng && point.lat && 
               !isNaN(point.lng) && !isNaN(point.lat) &&
               point.developer && point.developer !== 'nan'
      })
      
      console.log(`📍 显示 ${validPoints.length} 个有效热力图点`)
      
      if (validPoints.length > 0) {
        this.updateHeatmap(validPoints)
        //this.$meaage.success(`已显示 ${validPoints.length} 个项目的热力图`)
      } else {
        console.warn('⚠️ 没有有效的热力图数据点')
        this.clearHeatmap()
      }
    },

    // 🔥 地图变化后重新绘制热力图的统一方法
    redrawHeatmapAfterMapChange() {
      console.log('🔄 地图变化后重新绘制热力图')
      
      // 重新初始化热力图Canvas
      this.initHeatmapCanvas()
      
      // 🔄 使用重试机制确保地图已经完全加载
      this.redrawHeatmapWithRetry(0)
    },

    // 🔄 带重试机制的热力图重绘方法
    redrawHeatmapWithRetry(attempt = 0) {
      const maxAttempts = 3
      const retryDelay = 300
      
      // 如果当前有热力图数据，重新绘制
      if (this.currentHeatmapData && this.currentHeatmapData.length > 0) {
        console.log(`🎨 重新绘制现有热力图数据 (尝试 ${attempt + 1}/${maxAttempts})`)
        
        // 测试坐标转换是否正常工作
        const testPoint = this.currentHeatmapData[0]
        if (testPoint && testPoint.lng && testPoint.lat) {
          const testCoords = this.convertGeoToScreen(testPoint.lng, testPoint.lat)
          
          if (testCoords && testCoords.length === 2) {
            // 坐标转换正常，可以绘制热力图
            this.drawHeatmap(this.currentHeatmapData)
            console.log('✅ 热力图重绘成功')
          } else if (attempt < maxAttempts - 1) {
            // 坐标转换失败，重试
            console.log(`⚠️ 坐标转换尚未就绪，${retryDelay}ms后重试...`)
            setTimeout(() => {
              this.redrawHeatmapWithRetry(attempt + 1)
            }, retryDelay * (attempt + 1))
          } else {
            console.warn('❌ 达到最大重试次数，使用备用方案绘制热力图')
            this.drawHeatmap(this.currentHeatmapData)
          }
        }
      } else {
        // 如果没有当前数据，根据选择状态重新筛选和显示
        if (this.selectedCompetitor) {
          // 如果选择了具体友商，显示该友商的热力图
          this.showCompetitorHeatmap(this.selectedCompetitor)
        } else {
          // 否则根据地区筛选显示
          const selectedProvince = this.provinces.find(p => p.value === this.selectedProvince)
          const selectedCity = this.cities.find(c => c.value === this.selectedCity)
          const provinceName = selectedProvince ? selectedProvince.label : ''
          const cityName = selectedCity ? selectedCity.label : ''
          
          if (provinceName || cityName) {
            this.filterHeatmapByLocation(provinceName, cityName)
          } else {
            this.showAllHeatmapData()
          }
        }
      }
    },

    // 🎯 根据省份/城市筛选热力图数据
    filterHeatmapByLocation(provinceName = '', cityName = '') {
      console.log(`🎯 根据地区筛选热力图: 省份=${provinceName}, 城市=${cityName}`)
      
      if (!this.competitorHeatmapData || !this.competitorHeatmapData.points) {
        console.warn('⚠️ 没有热力图数据可筛选')
        this.clearHeatmap()
        return
      }
      
      let filteredPoints = this.competitorHeatmapData.points.filter(point => {
        // 基础数据验证
        if (!point.lng || !point.lat || 
            isNaN(point.lng) || isNaN(point.lat) ||
            !point.developer || point.developer === 'nan') {
          return false
        }
        
        // 如果没有选择省份和城市，显示全部
        if (!provinceName && !cityName) {
          return true
        }
        
        // 根据坐标判断是否在指定地区
        return this.isPointInLocation(point.lng, point.lat, provinceName, cityName)
      })
      
      console.log(`📍 地区筛选结果: ${filteredPoints.length} 个项目`)
      
      if (filteredPoints.length > 0) {
        this.updateHeatmap(filteredPoints)
        const locationText = cityName ? `${provinceName}-${cityName}` : provinceName || '全国'
        //this.$meaage.success(`已显示 ${locationText} 的 ${filteredPoints.length} 个项目`)
      } else {
        console.warn(`⚠️ ${provinceName}${cityName ? '-' + cityName : ''} 地区没有项目数据`)
        this.clearHeatmap()
        //this.$meaage.info(`${provinceName}${cityName ? '-' + cityName : ''} 地区暂无项目数据`)
      }
    },

    // 📍 判断坐标点是否在指定地区范围内
    isPointInLocation(lng, lat, provinceName, cityName) {
      // 中国各省份/直辖市的大致经纬度范围
      const locationBounds = {
        '广东省': { minLng: 109.7, maxLng: 117.2, minLat: 20.2, maxLat: 25.5 },
        '北京市': { minLng: 115.4, maxLng: 117.5, minLat: 39.4, maxLat: 41.1 },
        '上海市': { minLng: 120.9, maxLng: 122.0, minLat: 30.7, maxLat: 31.9 },
        '天津市': { minLng: 116.7, maxLng: 118.1, minLat: 38.6, maxLat: 40.3 },
        '重庆市': { minLng: 105.3, maxLng: 110.2, minLat: 28.2, maxLat: 32.2 },
        '江苏省': { minLng: 116.4, maxLng: 121.9, minLat: 30.8, maxLat: 35.1 },
        '浙江省': { minLng: 118.0, maxLng: 123.0, minLat: 27.0, maxLat: 31.4 },
        '安徽省': { minLng: 114.9, maxLng: 119.3, minLat: 29.4, maxLat: 34.7 },
        '福建省': { minLng: 115.8, maxLng: 120.4, minLat: 23.5, maxLat: 28.3 },
        '江西省': { minLng: 113.6, maxLng: 118.5, minLat: 24.5, maxLat: 30.1 },
        '山东省': { minLng: 114.8, maxLng: 122.7, minLat: 34.4, maxLat: 38.4 },
        '河南省': { minLng: 110.4, maxLng: 116.7, minLat: 31.4, maxLat: 36.4 },
        '河北省': { minLng: 113.5, maxLng: 119.8, minLat: 36.1, maxLat: 42.6 },
        '山西省': { minLng: 110.2, maxLng: 114.6, minLat: 34.6, maxLat: 40.7 },
        '内蒙古自治区': { minLng: 97.2, maxLng: 126.1, minLat: 37.4, maxLat: 53.3 },
        '辽宁省': { minLng: 118.9, maxLng: 125.8, minLat: 38.7, maxLat: 43.3 },
        '吉林省': { minLng: 121.6, maxLng: 131.2, minLat: 40.9, maxLat: 46.8 },
        '黑龙江省': { minLng: 121.2, maxLng: 135.1, minLat: 43.4, maxLat: 53.6 },
        '湖北省': { minLng: 108.3, maxLng: 116.1, minLat: 29.0, maxLat: 33.3 },
        '湖南省': { minLng: 108.8, maxLng: 114.3, minLat: 24.6, maxLat: 30.1 },
        '四川省': { minLng: 97.4, maxLng: 108.5, minLat: 26.0, maxLat: 34.3 },
        '贵州省': { minLng: 103.6, maxLng: 109.6, minLat: 24.6, maxLat: 29.2 },
        '云南省': { minLng: 97.5, maxLng: 106.2, minLat: 21.1, maxLat: 29.2 },
        '西藏自治区': { minLng: 78.4, maxLng: 99.1, minLat: 26.9, maxLat: 36.5 },
        '陕西省': { minLng: 105.5, maxLng: 111.3, minLat: 31.7, maxLat: 39.6 },
        '甘肃省': { minLng: 92.3, maxLng: 108.7, minLat: 32.1, maxLat: 42.8 },
        '青海省': { minLng: 89.4, maxLng: 103.1, minLat: 31.8, maxLat: 39.2 },
        '宁夏回族自治区': { minLng: 104.2, maxLng: 107.6, minLat: 35.2, maxLat: 39.4 },
        '新疆维吾尔自治区': { minLng: 73.5, maxLng: 96.4, minLat: 34.3, maxLat: 49.2 },
        '广西壮族自治区': { minLng: 104.3, maxLng: 112.1, minLat: 20.9, maxLat: 26.4 },
        '海南省': { minLng: 108.6, maxLng: 111.1, minLat: 18.2, maxLat: 20.1 },
        
        // 主要城市的经纬度范围（相对精确）
        '深圳市': { minLng: 113.8, maxLng: 114.6, minLat: 22.4, maxLat: 22.9 },
        '广州市': { minLng: 113.0, maxLng: 113.8, minLat: 22.9, maxLat: 23.6 },
        '杭州市': { minLng: 119.7, maxLng: 120.4, minLat: 29.9, maxLat: 30.6 },
        '南京市': { minLng: 118.4, maxLng: 119.2, minLat: 31.9, maxLat: 32.4 },
        '苏州市': { minLng: 120.0, maxLng: 121.2, minLat: 31.0, maxLat: 31.6 },
        '无锡市': { minLng: 119.9, maxLng: 120.7, minLat: 31.3, maxLat: 31.8 },
        '青岛市': { minLng: 119.4, maxLng: 121.2, minLat: 35.4, maxLat: 36.7 },
        '大连市': { minLng: 121.1, maxLng: 122.2, minLat: 38.6, maxLat: 39.3 },
        '沈阳市': { minLng: 123.0, maxLng: 124.0, minLat: 41.5, maxLat: 42.0 },
        '西安市': { minLng: 108.6, maxLng: 109.2, minLat: 34.0, maxLat: 34.6 },
        '成都市': { minLng: 103.7, maxLng: 104.5, minLat: 30.4, maxLat: 30.9 },
        '武汉市': { minLng: 113.8, maxLng: 114.7, minLat: 30.3, maxLat: 30.9 },
        '长沙市': { minLng: 112.6, maxLng: 113.2, minLat: 27.9, maxLat: 28.4 },
        '郑州市': { minLng: 113.4, maxLng: 114.0, minLat: 34.5, maxLat: 35.0 },
        '济南市': { minLng: 116.7, maxLng: 117.4, minLat: 36.4, maxLat: 36.9 },
        '合肥市': { minLng: 117.0, maxLng: 117.6, minLat: 31.6, maxLat: 32.1 },
        '石家庄市': { minLng: 114.2, maxLng: 114.8, minLat: 37.8, maxLat: 38.3 },
        '太原市': { minLng: 112.3, maxLng: 112.8, minLat: 37.6, maxLat: 38.1 },
        '哈尔滨市': { minLng: 126.3, maxLng: 127.1, minLat: 45.5, maxLat: 46.0 },
        '长春市': { minLng: 125.0, maxLng: 125.6, minLat: 43.6, maxLat: 44.1 },
        '昆明市': { minLng: 102.4, maxLng: 103.0, minLat: 24.6, maxLat: 25.2 },
        '南宁市': { minLng: 108.1, maxLng: 108.6, minLat: 22.6, maxLat: 23.0 },
        '贵阳市': { minLng: 106.4, maxLng: 107.0, minLat: 26.3, maxLat: 26.9 },
        '兰州市': { minLng: 103.5, maxLng: 104.2, minLat: 35.8, maxLat: 36.3 },
        '西宁市': { minLng: 101.5, maxLng: 102.0, minLat: 36.4, maxLat: 36.9 },
        '银川市': { minLng: 106.0, maxLng: 106.5, minLat: 38.3, maxLat: 38.7 },
        '乌鲁木齐市': { minLng: 87.3, maxLng: 88.0, minLat: 43.6, maxLat: 44.0 },
        '拉萨市': { minLng: 90.9, maxLng: 91.4, minLat: 29.4, maxLat: 29.9 },
        '呼和浩特市': { minLng: 111.4, maxLng: 112.0, minLat: 40.6, maxLat: 41.1 },
        '海口市': { minLng: 110.1, maxLng: 110.6, minLat: 19.9, maxLat: 20.3 },
        '福州市': { minLng: 119.1, maxLng: 119.6, minLat: 25.9, maxLat: 26.4 },
        '南昌市': { minLng: 115.6, maxLng: 116.2, minLat: 28.4, maxLat: 28.9 }
      }
      
      // 优先使用城市范围进行判断
      if (cityName && locationBounds[cityName]) {
        const bounds = locationBounds[cityName]
        return lng >= bounds.minLng && lng <= bounds.maxLng && 
               lat >= bounds.minLat && lat <= bounds.maxLat
      }
      
      // 其次使用省份范围进行判断
      if (provinceName && locationBounds[provinceName]) {
        const bounds = locationBounds[provinceName]
        return lng >= bounds.minLng && lng <= bounds.maxLng && 
               lat >= bounds.minLat && lat <= bounds.maxLat
      }
      
      // 如果没有匹配的地区范围，返回true（显示全部）
      console.warn(`⚠️ 未找到 ${provinceName}${cityName ? '-' + cityName : ''} 的地理范围信息`)
      return true
    },

    // 🔥 动态加载竞争对手热力图数据
    async loadCompetitorHeatmapData() {
      console.log('🔥 开始动态加载竞争对手热力图数据...')
      
      try {
        // 尝试多种路径加载JSON文件
        const possiblePaths = [
          '/competitor_heatmap_data.json',             // public目录路径（推荐）
          '/src/assets/competitor_heatmap_data.json',  // 开发环境路径
          './src/assets/competitor_heatmap_data.json', // 相对路径
          '/assets/competitor_heatmap_data.json',      // 打包后路径
          './assets/competitor_heatmap_data.json'      // 相对资源路径
        ]
        
        let response = null
        let loadedPath = null
        
        for (const path of possiblePaths) {
          try {
            console.log(`🔄 尝试加载路径: ${path}`)
            response = await fetch(path)
            if (response.ok) {
              loadedPath = path
              console.log(`✅ 成功加载路径: ${path}`)
              break
            }
          } catch (pathError) {
            console.warn(`❌ 路径失败: ${path}`, pathError)
          }
        }
        
        if (!response || !response.ok) {
        
        }
        
        const textData = await response.text()
        
        // 手动处理JSON中的NaN值
        const cleanedData = textData
          .replace(/:\s*NaN\s*,/g, ': null,')  // 替换 NaN 为 null
          .replace(/:\s*NaN\s*}/g, ': null}')  // 替换行末的 NaN
        
        // 解析清理后的JSON数据
        this.competitorHeatmapData = JSON.parse(cleanedData)
        
        // 验证数据格式
        if (!this.competitorHeatmapData.points || !Array.isArray(this.competitorHeatmapData.points)) {
          throw new Error('JSON数据格式错误：缺少points数组')
        }
        
     
        
        // 测试昌煜集团数据
    
      
        
        // 验证数据质量
       
      
        // 数据加载完成
        console.log('✅ 热力图数据加载成功')
        return Promise.resolve()
        
      } catch (error) {
        console.error('❌ 热力图数据加载失败:', error)
        // 如果动态加载失败，设置空数据并显示错误信息
        this.competitorHeatmapData = { points: [] }
        //this.$meaage.error('热力图数据加载失败，请检查网络连接或刷新页面重试')
        return Promise.reject(error)
      }
    },
    handleProjectPropChange(value) {
      console.log('🔥 处理竟品类型变化:', value)
    },
    handleMarketRatioChange(value) {
      console.log('🔥 处理我司市场占比变化:', value)
    },








  }
}
</script>

<style lang="less" scoped>
@import '../views/css/datalist.css';
</style>

